# 运动框架及基础
* 在运动开始时关闭已有的定时器(代码如下)
```
clearInterval(timer)
```
* 把运动和停止隔开（if/else）
* 运动基础代码:
```
<style>
#div1{
width: 200px;
height: 200px;
background-color: aqua;
top: 50px;
position: absolute;
left: 0px;
}
</style>
<script>
var timer=null;
function startMove(){
/* 关闭之前打开的定时器：
因为每点击一次按钮就会打开一个定时器,这样就会造成点击的按钮次数越多div的速度就会越快，
该语句可以在点击按钮之后把之前的定时器全关闭，这样就没有多个定时器一起运行的状态 */
clearInterval(timer);
var oDiv =document.getElementById('div1');
timer= setInterval(function(){
var speed=1;//控制物体运动的快慢
if(oDiv.offsetLeft>=300){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30)
}
</script>
<body>
<div id="div1"></div>
<button id="btn1" type="button" value="开始运动" onclick="startMove()">开始运动</button>
</body>
```
