js匀速运动停止条件

匀速运动，怎么让它到达指定位置时停止呢？

原理：

1,物体和目标的差值距离小于等于速度时，即停止

2,接着让物体移动位置等于目标位置

 

示例：匀速运动停止

html部分

<input type="button" value="100米" id="btn1" onclick="startMove(100);" />

<input type="button" value="300米" id="btn2" onclick="startMove(300);" />

<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>



<style>

#div1 { position:absolute; left:600px; width:100px; height:150px; background:red;}

#div2 { position:absolute; left:300px; height:800px; width:1px; background:black;}

#div3 { position:absolute; left:100px; height:800px; width:1px; background:black;}

</style>

 

js部分:

<script>



var timer = null;



function startMove(iTarget){

	var oDiv = document.getElementById("div1");

	var speed;

	

	clearInterval(timer);	

	timer = setInterval(function(){

		if(oDiv.offsetLeft<iTarget){

			speed = 7;

		} else {

			speed = -7;

		}

		

		if(Math.abs( iTarget - oDiv.offsetLeft)<= 7 ){			

			clearInterval(timer);

			oDiv.style.left = iTarget + "px";			

		} else {

			oDiv.style.left = oDiv.offsetLeft + speed + "px";

		}

	},30);



}







</script>