常见问题：定时器加速问题，每次点击会启动一个定时器，解决先清楚
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画运动平移</title> <style> *{margin:0;padding:0;} #aa1 {position:absolute;left:0;width:100px;height:100px;background:#F00;display:inline-block;} #btn1 {position:absolute;top:120px;} .line {position:absolute;left:300px;width:1px;height:500px;background:#000;} </style> </head> <body> <input type="button" value = "移动" id="btn1"> <div id="aa1"></div> <div id="aa2"></div> <div class=‘line‘></div> <script> //定时器加速问题，每次点击会启动一个定时器，解决先清楚 var oBtn1 = document.querySelector(‘#btn1‘); var oDiv1 = document.querySelector(‘#aa1‘); var timer=null; oBtn1.onclick=function(){ var speed=1; clearInterval(timer); timer = setInterval(function(){ oDiv1.style.left =oDiv1.offsetLeft+speed+‘px‘; if(oDiv1.offsetLeft>=300){ oDiv1.style.left=300+‘px‘; clearInterval(timer); timer =null; } },20) } </script> </body> </html>
原文：https://www.cnblogs.com/liubingyjui/p/10219147.html