1、简单的匀速运动
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> *{ padding : 0; margin : 0 } button{ width : 80px; height : 40px } #box{ width:200px; height:200px; background-color:pink; position:absolute; top:50px } </style> </head> <body> <button id="btn">动画</button> <div id="box"></div> <script type="text/javascript"> // 问题：1、边界 2、定时器的管理 var btn = document.geElementById("btn"); var box = document.getElementById("box") var timer = null; btn.onclick = function() { // 先关闭之前的定时器，防止定时器累加，导致速度加快 clearInterval(timer); timer = setInterval(function () { // num++; if(box.offsetLeft === 500){ clearInterval(timer); // 解决代码继续往下走 return } box.style.left = box.offsetLeft + 10 + ‘px‘ },30) } </script> </body> </html>