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

【Html】交通灯问题

news 文章来源：https://blog.csdn.net/chenlu5201314/article/details/134015285 2025/5/17 18:50:11

效果

在这里插入图片描述

实现方式

  • 计时器：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】交通灯问题

效果 实现方式 计时器&#xff1a;setTimeout或setInterval来计时。setInterval和 setTimeout 在某些情况下可能会出现计时不准确的情况。这通常是由于JavaScript的事件循环机制和其他代码执行所需的时间造成的。 问询&#xff1a;通过getCurrentLight将每个状态的持续时间设置…...

编程日记 2023/10/27 8:13:09

用IntelliJ远程打断点调试

前提当然是本地和远程部署的代码一样。 记录下步骤&#xff1a; 1&#xff0c;用token登录kuboard&#xff0c;找到目标容器的IP&#xff1a; 2, 用上一步找到的IP等信息创建Remote JVM Debug: 3&#xff0c;打断点&#xff0c;wkb说要把断点此属性改为线程。我试了下似乎…...

编程日记 2023/10/27 8:12:08

Spring-Bean的生命周期概述

Bean的生命周期概述 入门使用的Spring代码&#xff1a; ClassPathXmlApplicationContext context new ClassPathXmlApplicationContext("spring.xml"); UserService userService (UserService) context.getBean("userService"); userService.test(); …...

编程日记 2023/10/27 8:11:07

SENet 学习

ILSVRC 是一个比赛&#xff0c;全称是ImageNet Large-Scale Visual Recognition Challenge&#xff0c;平常说的ImageNet比赛指的是这个比赛。 使用的数据集是ImageNet数据集的一个子集&#xff0c;一般说的ImageNet&#xff08;数据集&#xff09;实际上指的是ImageNet的这个子…...

编程日记 2023/10/27 8:09:05

目前和未来的缓存构建

说起来可能有点反直觉&#xff0c;有时候不运行反而可以帮助我们加快速度&#xff0c;这正是网络浏览器运行的指导原则。不必在页面上加载所有内容&#xff0c;缓存的元素已经存在&#xff0c;不需要每次访问网站或网页时都重新加载。页面加载速度越快&#xff0c;浏览器的工作…...

编程日记 2023/10/27 8:08:04

aws亚马逊云免费账号代充值！！！什么是 AWS Lambda？

AWS Lambda 是一项计算服务&#xff0c;可使您无需预配置或管理服务器即可运行代码。 Lambda 在可用性高的计算基础设施上运行您的代码&#xff0c;执行计算资源的所有管理工作&#xff0c;其中包括服务器和操作系统维护、容量调配和弹性伸缩和记录。使用 Lambda&#xff0c;您…...

编程日记 2023/10/27 8:07:03

《从零开始大模型开发与微调 ：基于PyTorch与ChatGLM》简介

内 容 简 介 大模型是深度学习自然语言处理皇冠上的一颗明珠&#xff0c;也是当前AI和NLP研究与产业中最重要的方向之一。本书使用PyTorch 2.0作为学习大模型的基本框架&#xff0c;以ChatGLM为例详细讲解大模型的基本理论、算法、程序实现、应用实战以及微调技术&#xff0c;…...

编程日记 2023/10/27 8:06:02

【LeetCode】102. 二叉树的层序遍历

题目链接 文章目录 Python3方法一&#xff1a; 广度优先搜索 (BFS) ⟮ O ( n ) ⟯ \lgroup O(n) \rgroup ⟮O(n)⟯方法二&#xff1a; 深度优先搜索 (DFS) ⟮ O ( n ) ⟯ \lgroup O(n) \rgroup ⟮O(n)⟯ C方法一&#xff1a; 广度优先搜索 (BFS) ⟮ O ( n ) ⟯ \lgroup O(n…...

编程日记 2023/10/27 8:04:01

golang连接池检查连接失败时如何重试

在Go中&#xff0c;可以通过使用database/sql包的DB类型的Ping方法来检查数据库连接的可用性。如果连接检查失败&#xff0c;可以选择进行重试。以下是一个简单的示例代码&#xff0c;演示了如何在连接检查失败时进行重试&#xff1a; import ("database/sql""…...

编程日记 2023/10/27 8:02:57

从JavaScript到Rust的三年时间小结

Rust 是一种注重安全性、速度和并发性的系统编程语言。它能编译成高效的本地代码&#xff0c;无需垃圾回收即可访问内存等底层资源&#xff0c;同时还能防止分隔故障。 作者讨论了他们几年来用 Rust 构建大型应用程序和库的经验。他们发现 Rust 的借用检查器和类型系统有助于减…...

编程日记 2023/10/27 8:01:56

【Python机器学习】零基础掌握VotingRegressor集成学习

如何更准确地预测房价？ 想象一下，你是一名房地产分析师，你的任务是预测一个小区的未来房价。这看似简单，但实际上，房价受到多种因素的影响，如地理位置、房屋面积、周围设施等。你可能会使用线性回归模型来进行预测，但是你会发现，尽管模型的准确性还可以，但还是存在一…...

编程日记 2023/10/27 8:00:54

云计算模式的区域LIS系统源码，基于ASP.NET+JQuery、EasyUI+MVC技术架构开发

云计算模式的区域LIS系统源码 云LIS系统源码&#xff0c;自主版权 LIS系统是专为医院检验科的仪器设备能与计算机连接。可通过LIS系统向仪器发送指令&#xff0c;让仪器自动操作和接收仪器数据。并快速的将检验仪器中的数据导入到医生工作站中进行管理&#xff0c;且可将检验结…...

编程日记 2023/10/27 7:59:53

面向对象设计原则之接口隔离原则

目录 定义接口隔离原则与单一职责原则示例 定义 接口隔离原则&#xff0c;全称为 Interface Segregation Principle&#xff0c;缩写ISP。 原始定义&#xff1a;Clients should not be forced to depend upon interfaces that they don’t use。 翻译&#xff1a; 不应该强行…...

编程日记 2023/10/27 7:58:52

haproxy 负载均衡

haproxy负载均衡 haproxy&#xff1a;基于C语言开发的开源软件 支持高性能的tcp和http负载均衡器&#xff0c;工作中用的版本1.5.9 haproxy功能&#xff1a;主要用于高并发的web站点&#xff0c;工作原理和nginx、lvs都一样 haproxy缺点: 单节点部署&#xff0c;单实例运行。代…...

编程日记 2023/10/27 7:57:48

在el-dialog中使用tinymce 点击工具栏下拉框被遮挡

在el-dialog中使用tinymce控件时&#xff0c;会出现点击工具栏下拉框出现在弹窗下一层&#xff0c;审查元素之后发现是tinymce的下拉框z-index优先级低于el-dialog的z-index导致的&#xff0c;所以需要增加tinymce的下拉框的z-index值。 通过审查元素得到&#xff0c;需要修改t…...

编程日记 2023/10/27 7:56:47

CloudQuery + StarRocks：打造高效、安全的数据库管控新模式

随着技术的迅速发展&#xff0c;各种多元化的数据库产品应运而生&#xff0c;它们不仅类型众多&#xff0c;而且形式各异&#xff0c;国产化数据库千余套&#xff0c;开源数据库百余套 OceanBase 、PolarDB 、StarRocks…还有一些像 Oracle、MySQL 这些传统数据库。这些数据库产…...

编程日记 2023/10/27 7:55:46

各类统计模型R语言的详细使用教程-R语言的线性回归使用教程

各类统计模型R语言的详细使用教程-R语言的线性回归使用教程 前言R语言的线性回归代码示例回归诊断误差项正态qq图内学生化残差外学生化残差线性关系异常值的发现、处理帽子矩阵的方法DFFITS 准则Cook统计量COVRATIO准则多重共线性summaryKlein判别法特征根法条件指数法方差膨胀…...

编程日记 2023/10/27 7:54:44

点云从入门到精通技术详解100篇-基于尺度统一的三维激光点云与高清影像配准

目录 前言 研究现状 三维激光点云与影像配准研究现状 点云配准研究现状...

编程日记 2023/10/27 7:53:44

＜蓝桥杯软件赛＞零基础备赛20周--第2周

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周&#xff08;读者可以按…...

编程日记 2023/10/27 7:52:43

CMake多文件构建初步

前面学习了cmake&#xff0c;不熟悉&#xff0c;只是记录了操作过程&#xff1b;下面再继续&#xff1b; 略有一点进步&#xff0c;增加一个代码文件&#xff0c;之前是1个代码文件&#xff1b; 如下图&#xff0c;prj是空文件夹&#xff0c; CMakeLists.txt如下&#xff1b;…...

编程日记 2023/10/27 7:50:40

游戏研发的解决方案有哪些？

游戏研发的解决方案可以根据不同的需求和情境而有所不同&#xff0c;以下是一些常见的游戏研发解决方案&#xff1a; 游戏引擎&#xff1a; 游戏引擎是游戏研发的基础&#xff0c;它提供了开发游戏所需的核心功能&#xff0c;如图形渲染、物理引擎、音效管理、动画等。一些流行…...

编程日记 2023/10/27 7:49:39

Bayes决策：身高与体重特征进行性别分类

代码与文件请从这里下载&#xff1a;Auorui/Pattern-recognition-programming: 模式识别编程 (github.com) 简述 分别依照身高、体重数据作为特征&#xff0c;在正态分布假设下利用最大似然法估计分布密度参数&#xff0c;建立最小错误率Bayes分类器&#xff0c;写出得到的决…...

编程日记 2023/10/27 7:47:37

【考研数学】数学“背诵”手册 | 需要记忆且容易遗忘的知识点

文章目录 引言一、高数常见泰勒展开 n n n 阶导数公式多元微分函数连续、可微、连续可偏导之间的关系多元函数极值无条件极值条件极值 三角函数的积分性质华里士公式&#xff08; “点火”公式 &#xff09;特殊性质 原函数与被积函数的奇偶性结论球坐标变换公式 二、写在最后 …...

编程日记 2023/10/27 7:46:35

HJ3 明明的随机数

牛客网&#xff1a;HJ3 明明的随机数 https://www.nowcoder.com/practice/3245215fffb84b7b81285493eae92ff0?tpId37&tqId21226&ru/exam/oj 使用Go语言解题&#xff0c;最简单的方式&#xff1a; 解题一&#xff1a; // 运行时间&#xff1a;5ms 占用内存&#xff1a…...

编程日记 2023/10/27 7:45:34

如何恢复u盘删除文件?2023最新分享四种方法恢复文件

U盘上删除的文件怎么恢复&#xff1f;使用U盘存储文件是非常方便的&#xff0c;例如&#xff1a;在办公的时候&#xff0c;会使用U盘来存储网络上查找到的资料、产品说明等。在学习的时候&#xff0c;会使用U盘来存储教育机构分享的教学视频、重点知识等。而随着U盘存储文件的概…...

编程日记 2023/10/27 7:44:33

8.稳定性专题

1. anr https://code84.com/303466.html 一句话&#xff0c;规定的时间没有干完要干的事&#xff0c;就会发生anrsystem_anr场景 input 5sservice 前台20s 后台60scontentprivider超市 比较少见 原因 主线程耗时 复杂layout iobinder对端block子线程同步锁blockbinder被占满导…...

编程日记 2023/10/27 7:43:32

基于51单片机的四种波形信号发生器仿真设计(仿真+程序源码+设计说明书+讲解视频）

本设计 基于51单片机信号发生器仿真设计 &#xff08;仿真程序源码设计说明书讲解视频&#xff09; 仿真原版本&#xff1a;proteus 7.8 程序编译器&#xff1a;keil 4/keil 5 编程语言&#xff1a;C语言 设计编号&#xff1a;S0015 这里写目录标题 基于51单片机信号发生…...

编程日记 2023/10/27 7:42:31

不同网段的IP怎么互通

最近在整理工作的时候发现一个不同网段无法互通的问题&#xff0c;就是我们大家熟知的一级路由和二级路由无法互通的问题。由于需要记录整个过程的完整性&#xff0c;这里也需要详细记录下整个过程&#xff0c;明白的人不用看&#xff0c;可以直接跳过&#xff0c;到解决方法去…...

编程日记 2023/10/27 7:41:30

C#序列化与反序列化详解

在我们深入探时C#序列化和反序列化&#xff0c;之前我们先要明白什么是序列化&#xff0c;它又称串行化&#xff0c;是.ET运行时环境用来支持用户定义 类型的流化的机制。序列化就是把一个对象保存到一个文件或数据库字段中去&#xff0c;反序列化就是在适当的时候把这个文件再…...

编程日记 2023/10/27 7:40:29

如何在k8s的Java服务镜像（Linux）中设置中文字体

问题描述&#xff1a;服务是基于springboot的Java服务&#xff0c;在项目上是通过Maven的谷歌插件打包&#xff0c;再由k8s部署的。k8s的镜像就是一个Java服务&#xff0c;Java服务用到了中文字体。 解决这个问题首先需要搞定镜像字体的问题。有很多类似的解决方案&#xff0c;…...

编程日记 2023/10/27 7:39:28