定時器 - 簡單運動
阿新 • • 發佈：2021-08-16
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { position: absolute; top: 100px; left: 0; width: 100px; height: 100px; background-color: skyblue; } </style> </head> <body> <input type="button" value="開始" id="start"> <div class="box" id="box"></div> <script> // 簡單運動 // 獲取元素 var start = document.getElementById("start"); var box = document.getElementById("box"); //訊號量. 每次給它重新賦值, 實現變化 //訊號量初始值必須與屬性初始值保持一致, left:0 所以nowLeft=0 var nowLeft = 0; // 點選開始按鈕，讓 box 向右運動 start.onclick = function () { //定時器, 製作運動過程 setInterval(function () { nowLeft += 10; box.style.left = nowLeft + "px"; }, 100); }; </script> </body> </html>