运动终止条件：
匀速运动：距离足够近，常常用到Math.abs();
缓冲运动，两点重合，常常用到 Math.ceil(); Math.floor();
匀速运动：
<html lang="en"> <head> <meta charset="UTF-8"> <title>匀速运动</title> <style> div{width:100px;height:100px;background-color:green;position:absolute;left:0px;top:0;} input{margin-top:120px;} span{height:300px;width:1px;background:black;display:block;position:absolute;left:300px;top:0;} </style> </head> <body> <div id="div1"></div> <input type="button" value="开始运动" onclick="startMove(300)"> <span></span> </body> </html> <script> var time = null; function startMove(iTarget) { var oDiv = document.getElementById("div1"); clearInterval(time); time = setInterval(function () { var spend = 0; if(oDiv.offsetLeft<iTarget){ spend = 7; }else{ spend = -7; } if(Math.abs(oDiv.offsetLeft-iTarget)<7){//是否到达终点 clearInterval(time);//到达终点以后 oDiv.style.left = iTarget+'px'; }else{ oDiv.style.left = oDiv.offsetLeft+spend+"px";//到达之前 } },30); } </script>
缓冲运动：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div移动</title> <style> div{width:100px;height:100px;background-color:green;position:absolute;left:500px;top:0;} input{margin-top:120px;} textarea{width:100%;margin-top:150px;} span{height:300px;width:1px;background:black;display:block;position:absolute;left:300px;top:0;} </style> </head> <body> <div id="div1"></div> <input type="button" value="开始运动" onclick="startMove(300)"> <textarea name="" id="txt1" cols="30" rows="10"></textarea> <span></span> </body> </html> <script type="text/javascript"> var time = null; function startMove(iTarget) { var oDiv = document.getElementById("div1"); var oTxt = document.getElementById("txt1"); clearInterval(time); time = setInterval(function () { var spend = (iTarget-oDiv.offsetLeft)/8;//这里必须取整 // if(spend>0){//当值为正数的时候，向上取整 // spend = Math.ceil(spend); // }else{//当值为正数的时候，向上取整 // spend = Math.floor(spend); // } //可以简写成：问号前面是条件，后面是结果； spend = spend>0?Math.ceil(spend):Math.floor(spend); if(oDiv.offsetLeft == iTarget){//是否到达终点 clearInterval(time);//到达终点以后 }else{ oDiv.style.left = oDiv.offsetLeft+spend+"px";//到达之前 } oTxt.value +=spend+" "; document.title = oDiv.offsetLeft+spend; },30); } // 缓冲运动的问题 //小数问题，解决方案 //Math.ceil()当值为正数的时候，向上取整 // Math.floor()当值为负数的时候，向下取整 </script>