运动的方块

最新推荐文章于 2025-08-17 13:02:36 发布

原创最新推荐文章于 2025-08-17 13:02:36 发布 · 297 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

js 专栏收录该内容

113 篇文章

订阅专栏

英语专八转前端，在家学习ing。
要写一个按下按钮，方块运动的案例。
以下是基本的样式和布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运动</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #rect{
            width: 100px;
            height:100px;
            background-color:green;
        }
    </style>
</head>
<body>
<div id="rect"></div>
<button id="startMove">开始移动</button>
<script>
//代码
</script>
</body>
</html>

既然给的是id，那就用id获取这两个元素；

 var getById = function (id) {
    return document.getElementById(id);
 };

获取元素

 var movebtn=getById("movebtn");
 var rect=getById("rect");

为按钮添加点击事件，这里引入定时器，每30ms，向左便宜10px(offsetLeft-左偏移量)；

 movebtn.onclick=function(){
            setInterval(function(){
                rect.style.left=rect.offsetLeft+10+"px";
            },30)
        }

但是总不能一直偏移吧，这里我们让他偏移500px后停止。

var timer= setInterval(function(){
                var offset=rect.offsetLeft;
                rect.style.left=offset+10+"px";
                if(offset>=500){
                    clearInterval(timer)
                }
            },30)

貌似完美了，但是，你再点击一下按钮，发现div又偏移了10px，也就是说其实定时器仍然执行，也就是说下面代码的第二部分仍然执行了。

rect.style.left=offset+10+"px";
if(offset>=500){
  clearInterval(timer)
}

怎么解决呢？

           var timer= setInterval(function(){
                var offset=rect.offsetLeft;
                if(offset>=500)
                    clearInterval(timer);
                else
                    rect.style.left=offset+10+"px";

            },30)