前进的小车

最新推荐文章于 2024-07-12 16:27:40 发布

Genshin _Impact

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量318

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/qq_44857480/article/details/110523696

版权

① 编写HTML和JS程序，实现小车图片的移动，要求鼠标点击小车前进，再次点击即停止，点击事件可如此循环。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.animatoin{
    height:100px;
    width:120px;
    left:0px;
    top:0px;
    position:absolute;
}
</style>
</head>

<body>
<img src="car.jpg" class="animatoin" id="test" />

</body>
<script type="text/javascript">
var flag=true        ;
window.onload=function(){
    var ele=document.getElementById("test");
    var timer=null;
          ele.onclick=function(){
        if(flag){
            startAnimation();
            flag=false; 
        }else{
             clearInterval(timer);//清除定时器操作
            flag= true;//下一次点击执行
        }
              }
              function startAnimation(){
                  
                  var _ele=document.getElementById("test");
                  timer=setInterval(function(){
                      if(_ele.offsetLeft ==(window.innerWidth-120)){
                          clearInterval(timer);
                      }
                      _ele.style.left=_ele.offsetLeft+1+'px';
                  },10)
              }
}
</script>
</html>

Genshin _Impact

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
前进的小车

① 编写HTML和JS程序，实现小车图片的移动，要求鼠标点击小车前进，再次点击即停止，点击事件可如此循环。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta h
复制链接

扫一扫