JavaScript实现灯光闪烁效果

更新时间：2025年02月09日 08:24:10 作者：还是大剑师兰特

在JavaScript中,我们可以实现灯光闪烁效果,本文主要用到了 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闪烁效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS实现Ajax的方法分析
这篇文章主要介绍了JS实现Ajax的方法,结合实例形式分析了ajax的概念、原理、js实现与使用方法,需要的朋友可以参考下
2016-12-12
js和jquery分别验证单选框、复选框、下拉框
这篇文章主要为大家详细介绍了js和jquery分别验证单选框、复选框、下拉框的具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-12-12
html5 canvas js(数字时钟)实例代码
这篇文章主要介绍了html5 canvas js(数字时钟)实例代码，有需要的朋友可以参考一下
2013-12-12
js trim函数去空格函数与正则集锦
在javascript中处理文本框输入值的时候，经常要用到"去掉前后空白"的功能。用过jQuery的朋友都知道，jQuery提供了一个trim()这样的功能函数，可以很轻松帮我们实现这样的效果。
2009-11-11
js canvas实现红包照片效果
这篇文章主要介绍了js canvas实现红包照片效果
2018-08-08
TypeScript命名空间合并讲解
这篇文章主要介绍了TS命名空间合并讲解，回顾上一节的内容，在上一节中我们介绍了TS中最常见的声明合并：接口合并，今天要讲的内容也是TS中的声明合并，但这次是命名空间相关的合并,需要的朋友可以参考一下
2021-12-12
JavaScript动态创建二维数组的方法示例
这篇文章主要介绍了JavaScript动态创建二维数组的方法,结合实例形式分析了javascript动态创建二维数组的相关操作技巧与注意事项,需要的朋友可以参考下
2019-02-02
ES6中Set和Map数据结构，Map与其它数据结构互相转换操作实例详解
这篇文章主要介绍了ES6中Set和Map数据结构，Map与其它数据结构互相转换操作,结合实例形式详细分析了ES6中的Set和Map数据结构的概念、原理、遍历、去重等操作,以及Map与其它数据结构互相转换操作,需要的朋友可以参考下
2019-02-02
如何通过vscode运行调试javascript代码
这篇文章主要介绍了如何通过vscode运行调试javascript代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
js结合正则实现国内手机号段校验
这篇文章主要介绍了js结合正则实现国内手机号段校验的方法以及使用js和jQuery实现的简单校验手机号的示例，非常简单实用，有需要的小伙伴可以参考下。
2015-06-06