## 盒子自動向右移動，到達最右邊，開始返回移動，再重復 ``` <style> *{ margin:0; padding: 0; } #div{ width: 100px; height:100px; background-color: #f00; position: absolute; /* left:100px; */ } button{ position: relative; top:120px; } </style> <div id="div"></div> <button>點擊開始</button> <button>點擊停止</button> <script> // 邏輯：1.一個元素動起來，其實就是位置的移動 // 2.連續動起來，需要一個定時器的 （有一個開關才行，為了防止多個定時器累積） // 3.需要對移動做條件 (當移動距離大于body寬度或小于0) // 當滿足兩個條件 做相反移動 let buts = document.getElementsByTagName('button'); let div = document.getElementById('div'); let body = document.body; let num = 0; let timer = null; buts[0].onclick = function(){ // 聲明一個變量speed，也就是移動的速度 let speed = 5; if(timer==null){ timer = setInterval(()=>{ num += speed;//移動速度 div.style.left = num+'px';//元素真正移動的核心 // 當移動距離大于body寬度或小于0 if(num>=body.offsetWidth-div.offsetWidth || num<=0){ // 速度變量取反 speed = -speed; } },100); } } buts[1].onclick = function(){ clearInterval(timer); timer=null; } </script> ```