JavaScript： 計時操作
阿新 • • 發佈：2021-08-13
1 週期性定時器 setInterval
setInterval(1,2)：週期性觸發程式碼exp （常用）
1：執行語句
2：時間週期，單位為毫秒
案例：閃爍的字型 （1秒1變色）
<body> <h1 id="title">拉勾網：極速入職</h1> <script> var colors = ["red","blue","yellow","pink","orange","black"]; var i = 0; function bian(){ document.getElementById("title").style.color = colors[i++]; if(i == colors.length){ i = 0; // 顏色重新開始 } } setInterval(bian,100); // 每隔0.1秒，執行一次bian函式 </script> </body>
案例：在閃爍字型的基礎上擴充套件，閃爍的電子時鐘
<body> <h1 id="title"></h1> <script>var colors = ["red","blue","yellow","pink","orange","black"]; var i = 0; function bian(){ document.getElementById("title").style.color = colors[i++]; if(i == colors.length){ i = 0; // 顏色重新開始 } } function time(){var d = new Date(); var str = d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"號 "+d.getHours()+"點"+d.getMinutes()+"分"+d.getSeconds()+"秒"; document.getElementById("title").innerHTML = str; } setInterval(bian,100); // 每隔1秒，執行一次變色函式bian setInterval(time,100); // 每隔1秒，執行一次時間函式time </script> </body>
2停止定時器 clearInterval
案例：模擬年會抽獎
<body> <img id="tu" src="../lagou-html/img/1.jpg" width="50%" /> <br /> <button onclick="begin()">開始</button> <button onclick="stop()">停止</button> <script> var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]; function begin() { timer = setInterval(bian, 100); // 沒有使用var，所以timer是全域性變數 } function stop() { clearInterval(timer); // 停止定時器 } function bian() { var i = Math.floor(Math.random() * arr.length); // 0-4 document.getElementById("tu").src = "../lagou-html/img/" + arr[i]; } </script> </body>
3 一次性定時器 setTimeout
相當於延遲的效果，只執行一次
<script> function bian(){ document.body.style.backgroundColor = "red"; } //3秒之後呼叫 setTimeout(bian,3000); </script>