<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px; } </style> <script type="text/javascript"> window.onload=function(){ var oBtn=document.getElementById("btn"); var oDiv=document.getElementById("div1"); var iTimer=null; oBtn.onclick=function(){ clearInterval(iTimer); var iSpeed=0; iTimer=setInterval(function(){ iSpeed = (500 - oDiv.offsetLeft)/8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(oDiv.offsetLeft == 500){ clearInterval(iTimer) }else{ oDiv.style.left=oDiv.offsetLeft + iSpeed + "px"; } },30); } } </script> </head> <body> <input type="button" id="btn" value="动起来" /> <div id="div1"></div> </body> </html>