1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 </head> 10 11 <body> 12 <div class="box" style="width:100px; height:100px; background-color:red; position:absolute; top: 0; left: 0;"> 13 <!--要移动的小盒子--> 14 </div> 15 <button style="position:absolute; top:200px;"> 16 开始 17 </button> 18 19 <script> 20 var div = document.getElementsByClassName("box")[0];//选择要移动的盒子 21 var btn = document.getElementsByTagName("button")[0]; 22 23 var timer = null; 24 btn.onclick = function () {//在按钮上绑定点击事件，点击按钮，盒子开始移动 25 var speed = 5; 26 clearInterval(timer);//每次运行的时候，先把上一个定时器给停止了，不然同个时间段会执行多次，会导致速度越来越快 27 28 timer = setInterval(function () {//每次执行都会把唯一标识返回到timer 想要停止就得清除唯一标识 29 30 div.style.left = div.offsetLeft + speed + "px"; 31 //获取当前盒子的 left 加上我们设置的速度 加上 px 再赋给 小盒子 32 }, 50)//每50毫秒执行一次 33 } 34 35 </script> 36 </body> 37 38 </html>
