当前位置：首页 > article >正文

JS实现灯光闪烁效果

article 2025/2/11 1:26:49

在 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毫秒左右），即使你设置的值小于这个限制，也会被调整到最小延迟。
当页面卸载时，所有的定时器都会自动清除，所以不需要手动去清理这些定时器。

查看全文

http://www.kler.cn/a/538044.html