1.在这个例子里面,如果在div块运动的过程中继续点击按钮的话,速度会越来越快,所以再开另一个定时器的时候要把之前的定时器给关掉。这里timer定义的位置会影响定时器是否关闭,如果把timer定义成局部变量,那么在每一次点击的时候都会是null,那么clearInterval根本起不到关定时器的作用。所以必须把定时器定义为全局变量。
2.对于speed这个变量,不用吧他放在外面,直接作为一个局部变量就好了。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 200px; height: 300px; background: #ffccdd; position: absolute; } </style> </head> <body> <input id="btn" type="button"/> <div id="div1"> </div> <script> var oBtn = document.getElementById('btn'); var oDiv = document.getElementById('div1'); var timer = null; oBtn.onclick = function(){ // var timer = null; clearInterval(timer); timer = setInterval(function (){ var speed = 1; if(oDiv.offsetLeft>300) { clearInterval(timer); } else { oDiv.style.left = oDiv.offsetLeft+speed+'px'; } },30); }; </script> </body> </html>