JavaScript實現(xiàn)燈光閃爍效果

更新時間：2025年02月09日 08:24:10 作者：還是大劍師蘭特

在JavaScript中,我們可以實現(xiàn)燈光閃爍效果,本文主要用到了?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'; // 切換到亮的狀態(tài)
        } else {
            lightElement.style.backgroundColor = 'gray'; // 切換到暗的狀態(tài)
        }
    }
</script>
</body>
</html>

setInterval，clearInterval 解釋

setInterval

setInterval 方法允許你設定一個定時器，該定時器會按照指定的時間間隔（以毫秒為單位）重復調用一個函數(shù)或執(zhí)行一段代碼。它非常適合用于需要周期性更新的任務，如動畫、輪詢服務器數(shù)據(jù)等。

語法：

var intervalID = setInterval(func, delay, param1, param2, ...);
// 或者
var intervalID = setInterval(code, delay);

func 是要重復執(zhí)行的函數(shù)。
code 是一個字符串形式的可執(zhí)行代碼（不推薦使用，因為它有安全風險）。
delay 是兩次調用之間的時間間隔，以毫秒為單位（注意，實際延遲可能因系統(tǒng)或其他因素而有所不同）。
param1, param2, ... 是傳遞給 func 函數(shù)的參數(shù)列表（某些舊版瀏覽器不支持此特性）。
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秒后停止定時器