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

【Html】交通灯问题

news 2026/4/4 4:15:15

效果

在这里插入图片描述

实现方式

  • 计时器：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

COMSOL锂枝晶生长仿真模拟：四场耦合（化学场、浓度场、电场、应力场）

comsol锂枝晶生长仿真模拟-应力耦合。 化学场、浓度场、电场、应力场&#xff0c;四场耦合模拟锂枝晶的生长。锂金属负极在固态电池中总爱搞事情&#xff0c;枝晶刺穿隔膜的戏码天天上演。实验室里做破坏性测试成本太高&#xff0c;数值仿真就成了预判枝晶生长路径的透视眼。CO…...

编程新知 2026/4/4 3:59:56

氢燃料电池模型详解：基于MATLAB Simulink的全方位建模系统，涵盖输出电压模型、流道...

氢燃料电池模型 1.基于MATLAB/simulink开发的&#xff0c;包含输出电压模型&#xff0c;阳极流道模型&#xff0c;阴极流道模型&#xff0c;水传递模型&#xff0c;空压机模型&#xff0c;空压机模型&#xff0c;进气歧管&#xff0c;排气歧管等 2.PEMFC燃电模型为密歇根大学研…...

编程新知 2026/4/4 3:05:27

React 19 新特性吐槽：别再整那些花里胡哨的玩意儿了！

React 19 新特性吐槽&#xff1a;别再整那些花里胡哨的玩意儿了&#xff01; 毒舌时刻 React 19 又双叒叕更新了&#xff0c;一堆新特性看得人眼花缭乱。我就想问一句&#xff1a;这些特性真的是开发者需要的吗&#xff1f;还是 React 团队为了刷存在感整的花架子&#xff1f; …...

编程新知 2026/4/4 2:33:19

OpenClaw安全防护方案：Phi-3-mini-128k-instruct任务执行边界控制

OpenClaw安全防护方案&#xff1a;Phi-3-mini-128k-instruct任务执行边界控制 1. 为什么需要安全防护 当我第一次让OpenClaw接管本地电脑操作权限时&#xff0c;那种既兴奋又忐忑的心情至今记忆犹新。看着AI自动整理文件、发送邮件、执行脚本的同时&#xff0c;一个挥之不去的…...

编程新知 2026/4/4 2:05:08

干货 | SpringBoot 缓存实战：击穿、穿透、雪崩 通俗解决方案（附可落地代码）

一、前言做 Java 后端开发&#xff0c;只要用了 Redis 缓存&#xff0c;缓存击穿、缓存穿透、缓存雪崩这三个坑绕不开。面试必问、线上必踩。本文不讲晦涩底层源码&#xff0c;用大白话讲原理 SpringBoot 可直接复制的实战代码&#xff0c;新手能看懂&#xff0c;项目能直接上…...

编程新知 2026/4/4 1:44:44

Arduino_AVRSTL：面向AVR单片机的轻量C++ STL子集

1. Arduino_AVRSTL 库深度解析&#xff1a;面向资源受限 AVR 平台的 C 标准库子集移植1.1 项目定位与工程价值Arduino_AVRSTL 是对原始 ArduinoSTL 库的一次关键性平台适配&#xff0c;其核心目标并非完整复刻 ISO/IEC 14882 标准定义的 STL&#xff08;Standard Template Libr…...

编程新知 2026/4/4 1:32:31

《信号完整性》专栏简介

大家好&#xff0c;我是一只豌豆象&#xff0c;一名长期从事信号完整性设计分析的电子工程师&#xff0c;凭着对技术知识的无尽渴望和对技术工作的不断追求&#xff0c;再辅以极高的学习热情&#xff0c;使得我能够十年如一日的高效深耕于电子产品的设计研发领域。 在已过去的…...

编程新知 2026/4/4 1:16:26

CST可调谐太赫兹超材料吸收器仿真教学，石墨烯，二氧化钒，锑化铟等材料设置 包括建模过程，后处理

CST可调谐太赫兹超材料吸收器仿真教学&#xff0c;石墨烯&#xff0c;二氧化钒&#xff0c;锑化铟等材料设置 包括建模过程&#xff0c;后处理&#xff0c;吸收光谱图教学等 包括宽带吸收器、窄带&#xff0c;以及宽窄带吸收器设计"打开CST微波工作室&#xff0c;先别急着…...

编程新知 2026/4/3 21:41:58

Elsevier Tracker：学术审稿状态自动化追踪解决方案

Elsevier Tracker&#xff1a;学术审稿状态自动化追踪解决方案 【免费下载链接】Elsevier-Tracker 项目地址: https://gitcode.com/gh_mirrors/el/Elsevier-Tracker Elsevier Tracker是一款开源Chrome插件&#xff0c;专为学术研究者设计&#xff0c;提供Elsevier期刊审…...

编程新知 2026/4/3 20:43:32

用STC89C51+LM358做个心率计，从硬件选型到代码调试的完整避坑指南

从零打造高精度心率监测仪&#xff1a;STC89C51与LM358的硬核实战手册 指尖轻触红外传感器&#xff0c;LCD屏幕上的数字开始跳动——这不是医疗设备&#xff0c;而是你用面包板和51单片机搭建的心率监测装置。当开源硬件遇上生物信号采集&#xff0c;传统单片机依然能在可穿戴设…...

编程新知 2026/4/3 20:23:20