定时器的管理；
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; } </style> </head> <body> <input id="btn1" type="button" value="往后" /> <input id="btn2" type="button" value="往前" /> <div id="div1"></div> <script> var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); var oDiv = document.getElementById('div1'); oBtn1.onclick = function () { clearInterval( oDiv.timer ); oDiv.timer = setInterval(function () { var speed = parseInt(getStyle( oDiv, 'left' )) + -12; // 步长 if ( speed < 10 ) { speed = 10; } oDiv.style.left = speed + 'px'; if ( speed == 10 ) { clearInterval( oDiv.timer ); } }, 30); }; oBtn2.onclick = function () { clearInterval( oDiv.timer ); oDiv.timer = setInterval(function () { var speed = parseInt(getStyle( oDiv, 'left' )) + 12; // 步长 if ( speed > 800 ) { speed = 800; } oDiv.style.left = speed + 'px'; if ( speed == 800 ) { clearInterval( oDiv.timer ); } }, 30); }; function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } </script> </body> </html>