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

JS实现灯光闪烁效果

news 2026/2/8 20:33:40

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

相关文章：

JS实现灯光闪烁效果

在 JS中&#xff0c;我们可以实现灯光闪烁效果&#xff0c;这里主要用 setInterval 和 clearInterval 两个重要方法。 效果图 源代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>灯闪烁效果<…...

编程日记 2025/2/10 2:28:27

SpringCloud面试题----Nacos和Eureka的区别

功能特性 服务发现 Nacos&#xff1a;支持基于 DNS 和 RPC 的服务发现&#xff0c;提供了更为灵活的服务发现机制&#xff0c;能满足不同场景下的服务发现需求。Eureka&#xff1a;主要基于 HTTP 的 RESTful 接口进行服务发现&#xff0c;客户端通过向 Eureka Server 发送 HT…...

编程日记 2025/2/10 2:25:24

verilog练习：i2c slave 模块设计

文章目录 前言1. 结构2.代码2.1 iic_slave.v2.2 sync.v2.3 wr_fsm.v2.3.1 状态机状态解释 2.4 ram.v 3. 波形展示4. 建议5. 资料总结 前言 首先就不啰嗦iic协议了&#xff0c;网上有不少资料都是叙述此协议的。 下面将是我本次设计的一些局部设计汇总&#xff0c;如果对读者有…...

编程日记 2025/2/10 2:23:22

3.5 Go(特殊函数)

目录 一、匿名函数 1、匿名函数的特点&#xff1a; 2、匿名函数代码示例 2、匿名函数的类型 二、递归函数 1. 递推公式版本 2. 循环改递归 三、嵌套函数 1、嵌套函数用途 2、代码示例 3、作用域 & 变量生存周期 四、闭包 1、闭包使用场景 2、代码示例 五、De…...

编程日记 2025/2/10 2:22:21

Android的MQTT客户端实现

在 Android 平台上实现 MQTT 客户端的完整技术方案&#xff0c;涵盖基础实现、安全连接、性能优化和最佳实践&#xff1a; 一、技术选型与依赖配置 推荐库 Eclipse Paho Android Service&#xff08;官方维护&#xff0c;支持后台运行&#xff09; gradle 复制 // build.gradl…...

编程日记 2025/2/10 2:21:17

国产编辑器EverEdit - 编辑辅助功能介绍

1 编辑辅助功能 1.1 各编辑辅助选项说明 1.1.1 行号 打开该选项时&#xff0c;在编辑器主窗口左侧显示行号&#xff0c;如下图所示&#xff1a; 1.1.2 文档地图 打开该选项时&#xff0c;在编辑器主窗口右侧靠近垂直滚动条的地方显示代码的缩略图&#xff0c;如下图所示&…...

编程日记 2025/2/10 2:20:12

WPF 在后台使TextBox失去焦点的方法

在软件设计开发的时候&#xff0c;偶尔会遇到在后台xaml.cs后台中&#xff0c;要将TextBox控件的焦点取消或者使TextBox控件获取焦点&#xff0c;下面介绍讲述一种简单的“只让特定的 TextBox 失去焦点”方法: 前端xaml代码示例&#xff1a; <StackPanel Orientation"…...

编程日记 2025/2/10 2:15:06

工作案例 - python绘制excell表中RSRP列的CDF图

什么是CDF图 CDF&#xff08;Cumulative Distribution Function&#xff09;就是累积分布函数&#xff0c;是概率密度函数的积分。CDF函数是一个在0到1之间的函数&#xff0c;描述了随机变量小于或等于一个特定值的概率。在可视化方面&#xff0c;CDF图表明了一个随机变量X小于…...

编程日记 2025/2/10 2:11:02

CTF SQL注入学习笔记

部分内容来自于SQL注入由简入精_哔哩哔哩_bilibili SQL语句 1.mysqli_error()&#xff1a;返回最近调用函数的最后一个错误描述 语法&#xff1a;mysqli_error(connection) 规定要使用的Mysql连接; 返回一个带有错误描述的字符串。如果没有错误发生则返回 "" 2…...

编程日记 2025/2/10 2:04:54

element-plus el-tree-select 修改 value 字段

element-plus el-tree-select 修改 value 字段 &#xff0c;不显示label 需要注意两个地方&#xff1a; <el-tree-select v-model"value" :data"data" multiple :render-after-expand"false" show-checkbox style"width: 240px" …...

编程日记 2025/2/10 2:00:49

基于javaweb的SpringBoot小区智慧园区管理系统(源码+文档+部署讲解）

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 运行环境开发工具适用功能说明 运行环境 Java≥8、MySQL≥5.7、Node.js≥14 开发工具 后端&#xff1a;eclipse/idea/myeclipse…...

编程日记 2025/2/10 1:59:48

SpringBoot学习之shardingsphere实现分库分表（基于Mybatis-Plus）（四十九）

一、shardingsphere介绍 ShardingSphere是一款起源于当当网内部的应用框架。2015年在当当网内部诞生，最初就叫ShardingJDBC。2016年的时候，由其中一个主要的开发人员张亮，带入到京东数科，组件团队继续开发。在国内历经了当当网、电信翼支付、京东数科等多家大型互联网企业的…...

编程日记 2025/2/10 1:56:46

23.PPT：校摄影社团-摄影比赛作品【5】

目录 NO12345​ NO6 NO7/8/9/10​ 单元格背景填充表格背景填充文本框背景填充幻灯片背景格式设置添加考生文件夹下的版式 NO12345 插入幻灯片和放入图片☞快速&#xff1a;插入→相册→新建相册→文件→图片版式→相框形状→调整边框宽度左下角背景图片&#xff1a;视图→…...

编程日记 2025/2/10 1:53:43

Baumer工业相机堡盟相机的相机传感器芯片清洁指南

Baumer工业相机堡盟相机的相机传感器芯片清洁指南 Baumer工业相机1.Baumer工业相机传感器芯片清洁工具和清洁剂2.Baumer工业相机传感器芯片清洁步骤2.1、准备步骤2.2、清洁过程1.定位清洁工具2.清洁传感器3&#xff0e;使用吹风装置 Baumer工业相机传感器芯片清洁的优势设计与结…...

编程日记 2025/2/10 1:50:39

Spring Boot 整合 JPA 实现数据持久化

目录 前言 一、JPA 核心概念与实体映射 1. 什么是 JPA&#xff1f; 2. JPA 的主要组件 3. 实体映射 4. 常见的字段映射策略 二、Repository 接口与自定义查询 1. 什么是 Repository 接口&#xff1f; 2. 动态查询方法 3. 自定义查询 4. 分页与排序 三、实战案例&…...

编程日记 2025/2/10 1:49:38

快速在wsl上部署学习使用c++轻量化服务器-学习笔记

知乎上推荐的Tinywebserver这个服务器&#xff0c;快速部署搭建&#xff0c;学习c服务器开发 仓库地址 githubhttps://link.zhihu.com/?targethttps%3A//github.com/qinguoyi/TinyWebServerhttps://link.zhihu.com/?targethttps%3A//github.com/qinguoyi/TinyWebServer 在…...

编程日记 2025/2/10 1:48:37

【R语言】数据操作

一、查看和编辑数据 1、查看数据 直接打印到控制台 x <- data.frame(a1:20, b21:30) x View()函数 此函数可以将数据以电子表格的形式进行展示。 用reshape2包中的tips进行举例&#xff1a; library("reshape2") View(tips) head()函数 查看前几行数据&…...

编程日记 2025/2/10 1:46:35

MariaDB MaxScale实现mysql8主从同步读写分离

一、MaxScale基本介绍 MaxScale是maridb开发的一个mysql数据中间件&#xff0c;其配置简单&#xff0c;能够实现读写分离&#xff0c;并且可以根据主从状态实现写库的自动切换&#xff0c;对多个从服务器能实现负载均衡。 二、MaxScale实验环境 中间件192.168.121.51MaxScale…...

编程日记 2025/2/10 1:31:18

【python】简单的flask做页面。一组字母组成的所有单词。这里的输入是一组字母，而输出是所有可能得字母组成的单词列表

目录结构如下&#xff1a; https://github.com/kaede316/Pythons_pj.git 效果&#xff1a; 后续可扩展为工具网站&#xff1a; 更新 2025.02.09 1、增加等间距制作人 时间信息 2、增加判断润年的功能...

编程日记 2025/2/10 1:30:15

单片机之基本元器件的工作原理

一、二极管 二极管的工作原理 二极管是一种由P型半导体和N型半导体结合形成的PN结器件&#xff0c;具有单向导电性。 1. PN结形成 P型半导体&#xff1a;掺入三价元素&#xff0c;形成空穴作为多数载流子。N型半导体&#xff1a;掺入五价元素&#xff0c;形成自由电子作为多…...

编程日记 2025/2/10 1:25:07

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2026/1/25 14:43:07

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2026/1/31 17:09:43

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2026/1/31 11:58:35

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2026/2/4 23:47:47

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2026/1/31 12:52:04

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/2/8 9:34:11

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2026/2/2 9:25:26