快捷導(dǎo)航

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

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

在JavaScript中,我們可以實(shí)現(xiàn)燈光閃爍效果,本文主要用到了?setInterval?和?clearInterval?兩個(gè)重要方法,感興趣的小伙伴可以了解一下

效果圖

源代碼

<!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()">關(guān)閉閃爍</button>
	</div>


<script>
    let flashingInterval;

    function startFlashing() {
        if (!flashingInterval) { // 防止重復(fù)啟動(dòng)
            flashingInterval = setInterval(toggleLight, 500); // 每500毫秒切換一次
        }
    }

    function stopFlashing() {
        clearInterval(flashingInterval);
        flashingInterval = null;
        document.getElementById('light').style.backgroundColor = 'gray'; // 停止時(shí)設(shè)置為灰色
    }

    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è)定一個(gè)定時(shí)器，該定時(shí)器會(huì)按照指定的時(shí)間間隔（以毫秒為單位）重復(fù)調(diào)用一個(gè)函數(shù)或執(zhí)行一段代碼。它非常適合用于需要周期性更新的任務(wù)，如動(dòng)畫、輪詢服務(wù)器數(shù)據(jù)等。

語(yǔ)法：

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

func 是要重復(fù)執(zhí)行的函數(shù)。
code 是一個(gè)字符串形式的可執(zhí)行代碼（不推薦使用，因?yàn)樗邪踩L(fēng)險(xiǎn)）。
delay 是兩次調(diào)用之間的時(shí)間間隔，以毫秒為單位（注意，實(shí)際延遲可能因系統(tǒng)或其他因素而有所不同）。
param1, param2, ... 是傳遞給 func 函數(shù)的參數(shù)列表（某些舊版瀏覽器不支持此特性）。
intervalID 是返回的一個(gè)唯一的 ID 標(biāo)識(shí)符，可以用來取消定時(shí)器。

示例：

function sayHello() {
    console.log('Hello');
}
var intervalId = setInterval(sayHello, 3000); // 每3秒打印一次 'Hello'

clearInterval

一旦設(shè)置了定時(shí)器，如果你希望提前停止它，可以使用 clearInterval 方法。這個(gè)方法接收一個(gè)由 setInterval 返回的定時(shí)器 ID，并停止對(duì)應(yīng)的定時(shí)任務(wù)。

語(yǔ)法：

clearInterval(intervalID);

intervalID 是通過 setInterval 方法獲得的定時(shí)器 ID。

示例：

var intervalId = setInterval(sayHello, 3000);

// 假設(shè)在某個(gè)條件下停止定時(shí)器
setTimeout(function() {
    clearInterval(intervalId); // 停止定時(shí)器
}, 10000); // 在10秒后停止定時(shí)器