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; 100px; height:150px; background:red;}
#div2 { position:absolute; left:300px; height:800px; 1px; background:black;}
#div3 { position:absolute; left:100px; height:800px; 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>

  

原文地址:https://www.cnblogs.com/huaci/p/3851931.html