标签：
定时器运用
setInterval（function，1000)每隔1000毫秒执行一次function
setTimeout（function，1000）隔1000毫秒执行function（执行一次function）
clearInterval（） clearTimeout（）关闭定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>move</title>
<style type="text/css">
#c{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
var timer=null;
function move ( ) {
var oDiv=document.getElementById("c");
clearInterval(timer);
timer=setInterval(function ( ) {
var speed=5;
if(oDiv.offsetLeft>300){
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
},30)
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="move()">
<div id="c"></div>
</body>
</html>
技巧：
先开启定时器，再关闭定时器。如果事先关闭定时器，点击就会再次新建定时器，多个定时器同时工作，物体运动会加速。
把运动和停止隔开。如果只使用if，不使用else。在判断大小时候就会再次执行一次运动。
setInterval(function ( ) {left=offsetLeft+speed;} ,30)
调节速度大小时候，应该调节speed大小。30变大的时候会让这个这个运动变“卡”。
div.style.left和div.style.offsetLeft区别
div.style.left 返回的是字符串，如28px，div.style.offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。
style.left是读写的，offsetLeft是只读的。
offsetLeft好像更有性格，哈哈。
标签：
原文地址：http://www.cnblogs.com/upcircle/p/4604716.html
