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

JS实现灯光闪烁效果

news 2025/12/26 21:51:22

在 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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/12/26 21:02:21

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/12/14 13:08:55

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/12/18 4:21:19

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/11/12 21:44:33

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...

编程新知 2025/8/25 19:37:12

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

编程新知 2025/12/25 1:14:31

【实施指南】Android客户端HTTPS双向认证实施指南

&#x1f510; 一、所需准备材料 证书文件&#xff08;6类核心文件&#xff09; 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...

编程新知 2025/9/15 14:56:23