运动基础

运动基础

示例：点击按钮，Div开始移动，当到达特定位置时，停止运动

1,运动的要素是什么 比如 position:absolute; left:0px,改变left使其运动

2，让“物体”持续性的运动，依靠什么 定时器　setInterval()

3,停止的条件是什么 比如offsetLeft==300时，停止运动 要点：关闭定时器

Bug: (1),速度不是距离倍数时，运动过界　如速度为7时，它就是301，它就继续运动下去 解决：>=300 (2),运动停止时，继续点击按钮，物体继续运动 解决：把运动和停止隔开(if/else) (3),当Div在运动过程中，继续点击按钮，速度会变快  如速度为1时，试试看 原因：每点击一次，就开了一个定时器。比如5个定时器，就相当于5倍的速度 解决：运动开始前，清空定时器　clearInterval()

--------------------------------------------------------------------

总结

运动框架原则： 1，开始运动前，关闭原来的定时器 注：对应上面第3个bug 2，把运动和停止隔开(if/else) 注：对应上面第2个bug

 

----------------------------------------------------------------------

示例代码:

html

<input type="button" value="开始移动" id="btn1" onclick="startMove();"  />

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

 

js

var timer = null;

function startMove(){	
	var oDiv = document.getElementById("div1");
	
	clearInterval(timer);
	timer = setInterval(function(){		
		if(oDiv.offsetLeft >= 300){
			clearInterval(timer);
		} else {
			oDiv.style.left = oDiv.offsetLeft + 1 + "px";
		}
	},30);

}