JS实现物体运动

案例：简单的运动，让一个div从左到右运动

代码编写要注意的问题：
1.停不下来
2.当速度取某些数的时候停不下来
3.到达目的值以后点击还会继续运动
if…else 将运动分开
4.重复点击按钮速度加快
保证只有一个定时器在启动
每次启动定时器之前，将上次定时器关闭

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{margin: 0px;padding: 0px;} 
            #div1{width: 100px;height: 100px;background-color: red;position: absolute;left: 0px;top: 100px;}
        </style>
        <script>
          /* 
              动画    图像
              原理：能够识别的最小的时间间隔是18帧。
              动画：只需要让动画的切换时间间隔大于18帧，一般情况下电影院里面放映的电影24帧

          */
          /* 
              运动框架：(写任何运动都需要)
                  1.if..else 将运动分开
                  2.每次启动定时器之前，将上次定时器关闭
          */
          window.onload =function(){
              var oDiv1 = document.getElementById("div1");
              var oBtn = document.getElementById("btn1");
              
              // 运动速度
              var speed = 5;
              var timer = null;
              oBtn.onclick = function(){
              	// 每次点击将上一次定时器清除
                  clearInterval(timer);
                    timer = setInterval(function(){
                      if(oDiv1.offsetLeft >= 500){
                      clearInterval(timer);
                  }else
                        oDiv1.style.left = oDiv1.offsetLeft + speed + 'px';
                    },30);
              }
          }
        </script>
    </head>
    <body>
        <button id = "btn1">开始运动</button>
        <div id="div1"></div>
    </body>
</html>

效果：
div运动

原文链接：https://blog.csdn.net/wang_swa99er/article/details/123054054