寫個簡單運動模板
阿新 • • 發佈：2018-10-15
tom initial 清除 win ont clear 兩個 bottom int
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>簡單的運動</title> <style> div{ width: 50px; height: 50px; background: #CC66CC; margin-bottom: 20px; position: relative; } </style> </head> <body> <!-- 兩個div使用一個運動函數,一個向右移動350px,一個向右移動590px,每次移動3px --> <input type="button" value="開始運動"> <div id="div1"></div> <div id="div2"></div> <script> window.onload = function(){ var btn = document.querySelector("input"); var div1 = document.querySelector("#div1"); var div2= document.querySelector("#div2"); var timer; function move(obj,attr,target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var val = parseInt(getComputedStyle(obj)[attr]); val +=3; if(val>=target){ clearInterval(obj.timer); val = target; } obj.style[attr] = val+"px"; },16); } btn.onclick = function(){ move(div1,"left",350); move(div2,"left",590); } } </script> </body> </html>
1.在使用定時器時,要根據情況先清除其他定時器，避免多次點擊屬性值變化加快。
2.修訂最後運動停止的值，註意運動目標值與改變值（代碼中target、val）之間的關系。
寫個簡單運動模板