需求是點擊button，div就一直往右移動，給個條件left=800px就停止移動，通過定時器來控制。
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100px; background: red; /*因為在IE瀏覽器中如果沒有指定的值，就默認auto，所以我們需要先指定一個值*/ position: absolute; left: 0; } </style> <script type="text/javascript"> window.onload = function(){ //獲取元素的值 function getStyle(obj,name){ if(window.getComputedStyle){ return getComputedStyle(obj,null)[name] } else{ return obj.currentStyle[name] } } //需求是點擊button，div就一直往左移動 btn = document.getElementById("btn"); box1 = document.getElementById("box1"); var timer; btn.onclick = function(){ //清除上一個定時器 clearInterval(timer); //開啟一個定時器，用來執行動畫效果 setInterval(function(){ //獲取box1原來的left值，通過復用的函數去獲取,parseInt是把字符串的數字部分轉換為number var oldlvalue = parseInt(getStyle(box1,"left")); newvalue = oldlvalue + 10; if(newvalue>800){ newvalue = 800; } box1.style.left = newvalue + "px"; /* * 控制移動的位置，當800px時，就停止移動 */ if(newvalue === 800){ clearInterval(timer); } },3000) } } </script> </head> <body> <button id="btn">點擊div向右移動</button> <br /><br /> <div id="box1"></div> </body> </html>
希望可以堅持學習新的，這也是作為一個復習，到時候要回顧一看便知，多謝支持！