# 運動框架及基礎
* 在運動開始時關閉已有的定時器(代碼如下)
```
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>
```
