封装运动一:div匀速运动到目标位置
<!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 { width: 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>