【Html】交通灯问题
效果
实现方式
- 计时器：
setTimeout或setInterval来计时。setInterval和setTimeout在某些情况下可能会出现计时不准确的情况。这通常是由于JavaScript的事件循环机制和其他代码执行所需的时间造成的。 - 问询：通过
getCurrentLight将每个状态的持续时间设置为精确的值，并使用requestAnimationFrame来递归调用getCurrentLight函数，我们可以更准确地控制交通灯的状态。
源码
index.html
<!DOCTYPE html>
<html><head><title>交通灯</title><link type="text/css" rel="styleSheet" href="./index.css" /></head><body><div class="traffic-light"><div class="traffic-container"><div class="light green"></div><div class="light yellow"></div><div class="light red"></div></div><div class="time">90</div></div><script type="module">import {TrafficLight} from './TrafficLight.js';const time = document.querySelector('.time');const trafficDom = document.querySelector('.traffic-light');const light = new TrafficLight({red:3,yellow:2,green:5,initial:'red',});function raf(){requestAnimationFrame(()=>{raf();const current = light.getCurrentLight();time.textContent =current.remain;trafficDom.className = `traffic-light ${current.color}`;console.log(current.color,current.remain);})}raf();</script></body>
</html>
index.css
* {margin: 0;padding: 0;box-sizing: border-box;
}body{width: 100vw;height: 100vh;margin: 0;/* backgroud: #191c29 */background: #fff;
}.traffic-light{width: 200px;margin: 10px auto;-webkit-box-flex: inherit;text-align: center;
}.light{width: 20px;height: 20px;border-radius: 10px;display:inline-block;background-color: gray;margin: 10px auto;
}.red .red{background-color: red;
}.green .green{background-color: green;
}
.yellow .yellow{background-color: yellow;
}.time{font-family: 'DS-Digital';font-size: 40px;
}
TrafficLight.js
export class TrafficLight {constructor(options) {const {red = 60,green = 60,yellow = 3,initial = 'green',} = options || {};this._colors ={red:{seconds: red,next:'yellow',},green:{seconds: green,next:'yellow',},yellow:{seconds : yellow,},};this._switch(initial);}_switch(color){this._currentColor = color;this._seconds = this._colors[color].seconds;this._time = Date.now();}_next(){if(this._currentColor === 'red'){this._colors.yellow.next = 'green';} else if(this._currentColor === 'green'){this._colors.yellow.next = 'red';} else{}this._switch(this._colors[this._currentColor].next);
}getCurrentLight(){const remain = Math.ceil(this._seconds -(Date.now() - this._time)/1000);if(remain<=0){this._next();return this.getCurrentLight();}return {color: this._currentColor,remain,};}}
字体 DS-Digital
下载字体 DS-Digital
注意：下载安装字体后需要重启浏览器才生效
相关文章：
【Html】交通灯问题
效果 实现方式 计时器：setTimeout或setInterval来计时。setInterval和 setTimeout 在某些情况下可能会出现计时不准确的情况。这通常是由于JavaScript的事件循环机制和其他代码执行所需的时间造成的。 问询：通过getCurrentLight将每个状态的持续时间设置…...
用IntelliJ远程打断点调试
前提当然是本地和远程部署的代码一样。 记录下步骤： 1，用token登录kuboard，找到目标容器的IP： 2, 用上一步找到的IP等信息创建Remote JVM Debug: 3，打断点，wkb说要把断点此属性改为线程。我试了下似乎…...
Spring-Bean的生命周期概述
Bean的生命周期概述 入门使用的Spring代码： ClassPathXmlApplicationContext context new ClassPathXmlApplicationContext("spring.xml"); UserService userService (UserService) context.getBean("userService"); userService.test(); …...
SENet 学习
ILSVRC 是一个比赛，全称是ImageNet Large-Scale Visual Recognition Challenge，平常说的ImageNet比赛指的是这个比赛。 使用的数据集是ImageNet数据集的一个子集，一般说的ImageNet（数据集）实际上指的是ImageNet的这个子…...
目前和未来的缓存构建
说起来可能有点反直觉，有时候不运行反而可以帮助我们加快速度，这正是网络浏览器运行的指导原则。不必在页面上加载所有内容，缓存的元素已经存在，不需要每次访问网站或网页时都重新加载。页面加载速度越快，浏览器的工作…...
aws亚马逊云免费账号代充值！！！什么是 AWS Lambda？
AWS Lambda 是一项计算服务，可使您无需预配置或管理服务器即可运行代码。 Lambda 在可用性高的计算基础设施上运行您的代码，执行计算资源的所有管理工作，其中包括服务器和操作系统维护、容量调配和弹性伸缩和记录。使用 Lambda，您…...
《从零开始大模型开发与微调 ：基于PyTorch与ChatGLM》简介
内 容 简 介 大模型是深度学习自然语言处理皇冠上的一颗明珠，也是当前AI和NLP研究与产业中最重要的方向之一。本书使用PyTorch 2.0作为学习大模型的基本框架，以ChatGLM为例详细讲解大模型的基本理论、算法、程序实现、应用实战以及微调技术，…...
【LeetCode】102. 二叉树的层序遍历
题目链接 文章目录 Python3方法一： 广度优先搜索 (BFS) ⟮ O ( n ) ⟯ \lgroup O(n) \rgroup ⟮O(n)⟯方法二： 深度优先搜索 (DFS) ⟮ O ( n ) ⟯ \lgroup O(n) \rgroup ⟮O(n)⟯ C方法一： 广度优先搜索 (BFS) ⟮ O ( n ) ⟯ \lgroup O(n…...
golang连接池检查连接失败时如何重试
在Go中，可以通过使用database/sql包的DB类型的Ping方法来检查数据库连接的可用性。如果连接检查失败，可以选择进行重试。以下是一个简单的示例代码，演示了如何在连接检查失败时进行重试： import ("database/sql""…...
从JavaScript到Rust的三年时间小结
Rust 是一种注重安全性、速度和并发性的系统编程语言。它能编译成高效的本地代码，无需垃圾回收即可访问内存等底层资源，同时还能防止分隔故障。 作者讨论了他们几年来用 Rust 构建大型应用程序和库的经验。他们发现 Rust 的借用检查器和类型系统有助于减…...
【Python机器学习】零基础掌握VotingRegressor集成学习
如何更准确地预测房价？ 想象一下，你是一名房地产分析师，你的任务是预测一个小区的未来房价。这看似简单，但实际上，房价受到多种因素的影响，如地理位置、房屋面积、周围设施等。你可能会使用线性回归模型来进行预测，但是你会发现，尽管模型的准确性还可以，但还是存在一…...
云计算模式的区域LIS系统源码，基于ASP.NET+JQuery、EasyUI+MVC技术架构开发
云计算模式的区域LIS系统源码 云LIS系统源码，自主版权 LIS系统是专为医院检验科的仪器设备能与计算机连接。可通过LIS系统向仪器发送指令，让仪器自动操作和接收仪器数据。并快速的将检验仪器中的数据导入到医生工作站中进行管理，且可将检验结…...
面向对象设计原则之接口隔离原则
目录 定义接口隔离原则与单一职责原则示例 定义 接口隔离原则，全称为 Interface Segregation Principle，缩写ISP。 原始定义：Clients should not be forced to depend upon interfaces that they don’t use。 翻译： 不应该强行…...
haproxy 负载均衡
haproxy负载均衡 haproxy：基于C语言开发的开源软件 支持高性能的tcp和http负载均衡器，工作中用的版本1.5.9 haproxy功能：主要用于高并发的web站点，工作原理和nginx、lvs都一样 haproxy缺点: 单节点部署，单实例运行。代…...
在el-dialog中使用tinymce 点击工具栏下拉框被遮挡
在el-dialog中使用tinymce控件时，会出现点击工具栏下拉框出现在弹窗下一层，审查元素之后发现是tinymce的下拉框z-index优先级低于el-dialog的z-index导致的，所以需要增加tinymce的下拉框的z-index值。 通过审查元素得到，需要修改t…...
CloudQuery + StarRocks：打造高效、安全的数据库管控新模式
随着技术的迅速发展，各种多元化的数据库产品应运而生，它们不仅类型众多，而且形式各异，国产化数据库千余套，开源数据库百余套 OceanBase 、PolarDB 、StarRocks…还有一些像 Oracle、MySQL 这些传统数据库。这些数据库产…...
各类统计模型R语言的详细使用教程-R语言的线性回归使用教程
各类统计模型R语言的详细使用教程-R语言的线性回归使用教程 前言R语言的线性回归代码示例回归诊断误差项正态qq图内学生化残差外学生化残差线性关系异常值的发现、处理帽子矩阵的方法DFFITS 准则Cook统计量COVRATIO准则多重共线性summaryKlein判别法特征根法条件指数法方差膨胀…...
点云从入门到精通技术详解100篇-基于尺度统一的三维激光点云与高清影像配准
目录 前言 研究现状 三维激光点云与影像配准研究现状 点云配准研究现状...
＜蓝桥杯软件赛＞零基础备赛20周--第2周
报名明年4月蓝桥杯软件赛的同学们，如果你是大一零基础，目前懵懂中，不知该怎么办，可以看看本博客系列：备赛20周合集 20周的完整安排请点击：20周计划 每周发1个博客，共20周（读者可以按…...
CMake多文件构建初步
前面学习了cmake，不熟悉，只是记录了操作过程；下面再继续； 略有一点进步，增加一个代码文件，之前是1个代码文件； 如下图，prj是空文件夹， CMakeLists.txt如下；…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现，这取决于你是想在组件内部直接设置，还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法： 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
unix/linux，sudo，其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计，遵循“让事情保…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
【生成模型】视频生成论文调研
工作清单 上游应用方向：控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术：基于互相关的相干体技术（Correlation）第二代相干体技术：基于相似的相干体技术（Semblance）基于多道相似的相干体…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验，我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育，这并非炒作，而是已经发生的巨大变革。教育机构和教育者不能忽视它，试图简单地禁止学生使…...