在 JS中，我們可以實現燈光閃爍效果，這里主要用 setInterval 和 clearInterval 兩個重要方法。
效果圖
源代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>燈閃爍效果</title><style>#light {width: 100px;height: 100px;background-color: gray;margin: 20px;border-radius:50%;}.dd{width: 150px;height: 200px;margin:30px auto;}</style>
</head>
<body><div class="dd"><div id="light"></div><button onclick="startFlashing()">開啟閃爍</button><button onclick="stopFlashing()">關閉閃爍</button></div><script>let flashingInterval;function startFlashing() {if (!flashingInterval) { // 防止重復啟動flashingInterval = setInterval(toggleLight, 500); // 每500毫秒切換一次}}function stopFlashing() {clearInterval(flashingInterval);flashingInterval = null;document.getElementById('light').style.backgroundColor = 'gray'; // 停止時設置為灰色}function toggleLight() {const lightElement = document.getElementById('light');if (lightElement.style.backgroundColor === 'gray') {lightElement.style.backgroundColor = 'yellow'; // 切換到亮的狀態} else {lightElement.style.backgroundColor = 'gray'; // 切換到暗的狀態}}
</script>
</body>
</html>
setInterval，clearInterval 解釋
》 setInterval
setInterval 方法允許你設定一個定時器，該定時器會按照指定的時間間隔（以毫秒為單位）重復調用一個函數或執行一段代碼。它非常適合用于需要周期性更新的任務，如動畫、輪詢服務器數據等。
語法：
var intervalID = setInterval(func, delay, param1, param2, ...);
// 或者
var intervalID = setInterval(code, delay);
func是要重復執行的函數。code是一個字符串形式的可執行代碼（不推薦使用，因為它有安全風險）。delay是兩次調用之間的時間間隔，以毫秒為單位（注意，實際延遲可能因系統或其他因素而有所不同）。param1, param2, ...是傳遞給func函數的參數列表（某些舊版瀏覽器不支持此特性）。intervalID是返回的一個唯一的 ID 標識符，可以用來取消定時器。
示例：
function sayHello() {console.log('Hello');
}
var intervalId = setInterval(sayHello, 3000); // 每3秒打印一次 'Hello'
》 clearInterval
一旦設置了定時器，如果你希望提前停止它，可以使用 clearInterval 方法。這個方法接收一個由 setInterval 返回的定時器 ID，并停止對應的定時任務。
語法：
clearInterval(intervalID);
intervalID是通過setInterval方法獲得的定時器 ID。
示例：
var intervalId = setInterval(sayHello, 3000);// 假設在某個條件下停止定時器
setTimeout(function() {clearInterval(intervalId); // 停止定時器
}, 10000); // 在10秒后停止定時器
》 注意事項
setInterval的回調函數是在全局作用域中執行的，這意味著它的this關鍵字將指向全局對象（通常是window對象）。如果需要保持當前作用域，可以使用箭頭函數或bind()方法。- 如果
delay設置得太短，可能會導致性能問題，尤其是在低性能設備上運行時。此外，瀏覽器通常會有最小延遲限制（通常為4毫秒左右），即使你設置的值小于這個限制，也會被調整到最小延遲。 - 當頁面卸載時，所有的定時器都會自動清除，所以不需要手動去清理這些定時器。
)
