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

JS实现灯光闪烁效果

news 文章来源：https://blog.csdn.net/cuclife/article/details/145511161 2025/5/24 6:18: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

吴恩达深度学习——卷积神经网络的特殊应用

内容来自https://www.bilibili.com/video/BV1FT4y1E74V&#xff0c;仅为本人学习使用。 文章目录 人脸识别相关定义Similarity函数使用Siamese网络实现函数d使用Triplet损失学习参数 神经风格迁移深度卷积网络可视化神经风格迁移的代价函数内容损失函数风格损失函数 人脸识别 …...

编程日记 2025/2/10 1:23:05

安宝特方案 | AR助力制造业安全巡检智能化革命！

引言&#xff1a; 在制造业中&#xff0c;传统巡检常面临流程繁琐、质量波动、数据难以追溯等问题。安宝特AR工作流程标准化解决方案&#xff0c;通过增强现实AR技术&#xff0c;重塑制造业安全巡检模式&#xff0c;以标准化作业流程为核心&#xff0c;全面提升效率、质量与…...

编程日记 2025/2/10 1:17:58

Unity-Mirror网络框架-从入门到精通之Discovery示例

文章目录 前言Discovery示例NetworkDiscoveryNetworkDiscoveryHUDServerRequestServerResponse最后前言 在现代游戏开发中，网络功能日益成为提升游戏体验的关键组成部分。本系列文章将为读者提供对Mirror网络框架的深入了解，涵盖从基础到高级的多个主题。Mirror是一个用于Un…...

编程日记 2025/2/10 1:10:52

项目的虚拟环境的搭建与pytorch依赖的下载

文章目录 配置环境 pytorch的使用需要安装对应的cuda 在PyTorch中使用CUDA, pytorch与cuda不同版本对应安装指南&#xff0c;查看CUDA版本&#xff0c;安装对应版本pytorch 【超详细教程】2024最新Pytorch安装教程&#xff08;同时讲解安装CPU和GPU版本&#xff09; 配置环境…...

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

现代前端工程化实践：高效构建的秘密

一、前端工程化错误监控 这种监控可以帮助开发人员及时发现和解决问题&#xff0c;提高应用程序的稳定性和可靠性。 1. Sentry&#xff1a;Sentry是一款开源的错误监控平台&#xff0c;可以监控前端、后端以及移动端应用程序中的错误和异常。Sentry提供了实时错误报告、错误分…...

编程日记 2025/2/10 1:00:40

ARM Linux Qt使用JSON-RPC实现前后台分离

文章目录 1、前言2、解决方案2.1、JSON-RPC2.2、Qt中应用JSON-RPC的框架图2.3、优点2.4、JSON-RPC 1.0 协议规范 3、程序示例3.1、Linux C&#xff08;只例举RPC Server相关程序&#xff09;3.2、Qt程序&#xff08;只例举RPC Client相关程序&#xff09; 4、编译程序4.1、交叉…...

编程日记 2025/2/10 0:59:39

【C++篇】C++11新特性总结1

目录 1&#xff0c;C11的发展历史 2&#xff0c;列表初始化 2.1C98传统的{} 2.2&#xff0c;C11中的{} 2.3&#xff0c;C11中的std::initializer_list 3&#xff0c;右值引用和移动语义 3.1&#xff0c;左值和右值 3.2&#xff0c;左值引用和右值引用 3.3&#xff0c;…...

编程日记 2025/2/10 0:55:34

【Nginx + Keepalived 实现高可用的负载均衡架构】

使用 Nginx Keepalived 可以实现高可用的负载均衡架构&#xff0c;确保在某个 Nginx 节点故障时&#xff0c;自动将流量转移到备用节点。以下是详细的实现步骤&#xff1a; 1. 架构概述 Nginx&#xff1a;作为负载均衡器&#xff0c;将流量分发到后端服务器。Keepalived&…...

编程日记 2025/2/10 0:52:31

使用外骨骼灵活远程控制协作机器人案例

外骨骼控制器采用可调节结构&#xff0c;简化了机器人编程&#xff0c;使协作机器人 FR3 的远程控制变得容易。 一、引言 在开发机器人手臂或双臂系统的应用程序时&#xff0c;经常会遇到以下挑战&#xff1a; 1. 使用拖动和示教进行定位的困难&#xff1a;拖动和示教功能通常…...

编程日记 2025/2/10 0:50:29

Centos Stream 10 根目录下的文件夹结构

/ ├── bin -> usr/bin ├── boot ├── dev ├── etc ├── home ├── lib -> usr/lib ├── lib64 -> usr/lib64 ├── lostfound ├── media ├── mnt ├── opt ├── proc ├── root ├── run ├── sbin -> usr/sbin ├── srv ├─…...

编程日记 2025/2/10 0:47:26