软件开发培训班 >> 编程开发 >> JavaScript


JavaScript实现灯光闪烁效果

在 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毫秒左右），即使你设置的值小于这个限制，也会被调整到最小延迟 。

当页面卸载时，所有的定时器都会自动清除，所以不需要手动去清理这些定时器 。

到此这篇关于JavaScript实现灯光闪烁效果的文章就介绍到这了,更多相关JavaScript闪烁效果内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！