运动基础
运动基础
示例：点击按钮，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); }