<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box { 100px; height: 100px; background: red; position: absolute; left: 0; top: 100px; } </style> </head> <body> <button id="btn">匀速运动</button> <div id="box"></div> <script src="tool.js"></script> <script> /*匀速运动： 思想： 1、加计时器； 2、改变left值(定位)； */ var oBtn = ById('btn'); var oBox = ById('box'); var timer = null; oBtn.onclick = function () { clearInterval(timer); timer = setInterval(function () { oBox.style.left = oBox.offsetLeft + 2 + "px"; //以上只能让div匀速运动下去，不能停止，若要让div在某一时段停止，则需给它设置一个目标值， //目标值即div相对于页面的距离 if (oBox.offsetLeft == 400) { clearInterval(timer); } }, 30) } /*简单的匀速运动就写完了，但是这个程序中还存在1个bug,当我们连续点击btn按钮时会发现，div移动的速度 愈来愈快（原因：每点击一次计时器，就启动一次计时器，启动的计时器越多，div移动的越快） 解决办法：程序每完成一次，便清除一次计时器 */ </script> </body> </html>