在HTML中使用定時器可以實現一些自動化的操作,比如每隔一段時間自動刷新頁面、動態展示倒計時等。HTML提供了兩種常用的定時器設置方式:setTimeout()和setInterval()。
setTimeout()定時器是指在指定的時間之后執行一次操作。下面是一個簡單的例子:
setTimeout(function() { alert("Hello, world!"); }, 3000); // 3秒鐘之后彈出消息框
setInterval()定時器則是指每隔指定時間再執行一次操作,直到手動清除。下面是一段用setInterval()實現的倒計時例子:
var countDown = 60; // 倒計時時間,單位為秒 document.getElementById("countdown").innerHTML = countDown; var timer = setInterval(function() { countDown--; document.getElementById("countdown").innerHTML = countDown; if (countDown<= 0) { clearInterval(timer); alert("Time's up!"); } }, 1000); // 每隔1秒鐘執行一次操作
需要注意的是,設置定時器的操作建議放在頁面加載完畢之后執行,比如:
window.onload = function() { // 這里放定時器的代碼 }
如果定時器的操作涉及到DOM的改變,建議在操作之前獲取DOM元素,避免多次遍歷DOM節點降低性能。