在JavaScript中,我们可以实现灯光闪烁效果,本文主要用到了 setInterval 和 clearInterval 两个重要方法,感兴趣的小伙伴可以了解一下
目录
效果图源代码setInterval，clearInterval 解释setIntervalclearInterval注意事项在 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毫秒左右），即使你设置的值小于这个限制，也会被调整到最小延迟。
当页面卸载时，所有的定时器都会自动清除，所以不需要手动去清理这些定时器。
