运用JavaScript红绿灯倒计时

最新推荐文章于 2024-04-16 18:48:23 发布
VIP文章 最新推荐文章于 2024-04-16 18:48:23 发布
阅读量2.7k 收藏 5
点赞数 3
文章标签： JavaScript 红绿灯
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45095748/article/details/101565093
版权 

`.box{width:250px;
			    height:52px;
			    padding:15px 30px;
			    border:2px solid mediumvioletred;
			    border-radius:16px;
			    margin:0 auto;}
			.box .count{
				  width:60px;
				  color:crimson;
				  font-size:280%;
				  line-height:50px;
				  padding-left:6px;
				  margin-left:5px;
				  border:1px solid #fff}
			 .box div{
				  margin-left:5px;
				  float:left;
				  width:50px;
				  height:50px;
				  border-radius:50px;
				  border:1px solid salmon;}
			 .gray{background-color: #eee;}
			 .red{background-color:red;}
			 .yellow{background-color:yellow;}
			 .green{background-color:#26ff00;}`
		<script>
			var lamp={
   
				red:{
   
					obj:document.getElementById('red'),
					timeout:30,
					style :['red','gray','gray'],
					next :
最低0.47元/天 解锁文章
来颗溜溜莓
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript动态获取登录时间和在线时长
10-22
主要为大家详细介绍了javascript动态获取登录时间和在线时长的相关资料，获得登录时候的时间，用来和动态的时间做差来求时长，感兴趣的小伙伴们可以参考一下
黑马程序员——交通灯管理系统学习笔记
qq540795382的专栏
08-31 931
------- android培训、java培训、期待与您交流！ ---------- 交通灯管理系统学习笔记 模拟实现十字路口的交通灯管理系统逻辑，具体需求如下：  异步随机生成按照各个路线行驶的车辆。 例如：        由南向而来去往北向的车辆 ---- 直行车辆        由西向而来去往南向的车辆 ---- 右转车辆        由东向而来去往南向的车辆 ---- 左
Arduino之LED闪烁实验
最新发布
m0_62685174的博客
04-16 134
Arduino之LED闪烁实验 假设红绿灯切换的时长是30秒，三盏灯的闪动情况为：红灯常亮30秒，红灯熄灭，绿灯常亮27秒，然后按照1秒1次的频率闪动3次（时长为3秒），绿灯熄灭，黄灯按照1秒一次的频率闪动3次（时长为3秒），黄灯熄灭，如此重复。参考代码：
杨校老师课堂之JavaScript定时器案例的红绿灯设计--原始写法
杨校的博客
02-11 685
主要介绍了JavaScript定时器设置、使用与倒计时案例,详细分析了javascript定时器的设置、取消、循环调用并附带一个倒计时功能应用案例,需要的朋友可以参考下
用JS编写，红绿灯倒计时：实现三色交通信号灯的亮灯的顺序一般为“绿-＞黄-＞红-＞绿”依次循环。亮灯时长需根据路口的实际情况等因素来考虑设置，如红灯亮为30秒，绿灯亮为35秒，黄灯亮为5秒。
m0_53911328的博客
04-22 5207
CSS页面代码： <style> *{ margin: 0; padding: 0; } .signal-light{ width: 400px; margin: 100px auto 0; } .light{ display: flex; margin: 0 auto; width: 140px; height: 500px; flex-di
js -制作红绿灯倒计时
a754334599的博客
01-09 4078
1、html内容： <body> <div class="box"> <!-- 红灯 --> <div id="red"></div> <!-- 黄灯 --> <div id="yellow"></div> <!--绿灯 --> <div id="green"></div&
js红绿灯的实现方法
不想学习的打工人的博客
04-11 528
题目：某个路口的红绿灯，会按照红灯亮5s，黄灯亮2s，绿灯亮3s这样的顺序无限循环。要求：每一秒打印当前在亮的灯。
js红绿灯案例
NGMuXi的博客
05-11 363
/ 绿灯和红灯亮30秒。// 定义初始状态和计时器变量。// 定义倒计时函数。
用js实现红绿灯
qq_48758340的博客
04-15 5304
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、红绿灯二、使用步骤1.定义flag标记 前言 用js实现红绿灯 提示：以下是本篇文章正文内容，下面案例可供参考 一、红绿灯 示例：通过定时器、flag标记实现倒计时以及红绿灯的切换。 二、使用步骤 1.定义flag标记 var flag=1; //初始为1，‘1’代表红灯 ‘2’代表绿灯 ‘3’代表黄灯 代码如下（示例）： <!DOCTYPE html> <html lang="en"&.
JavaScript_实现红绿灯倒计时效果
热门推荐
qq_45683767的博客
09-27 1万+
红绿灯倒计时 1.效果 绿灯亮（35秒）-黄灯亮（5秒）-红灯亮（30秒）-绿灯亮（35秒）无限循环，实现红绿灯倒计时效果。 2.代码解析 （1）编写HTML代码 <div class="box"> <div id="red"></div> <div id="yellow"></div> <di...
JS交通红绿灯动画特效
04-25
JS交通红绿灯动画特效是一款带秒数倒计时的交通信号灯动画特效。
使用５１定时器实现红绿灯控制
05-14
使用单片机定时器中断3实现东西南北红绿灯的仿真,南北红灯30秒,南北黄灯5秒,南北绿灯25秒,内含ISIS仿真软件文件. time　interrupt 3
js定时器实现倒计时效果
01-19
本文实例为大家分享了js定时器实现倒计时效果展示的具体代码，供大家参考，具体内容如下 日期函数 倒计时 =  用 将来的时间  –   现在的时间  问题：将来时间 距离 1970 毫秒数   –     现在距离 1970年1            用将来的毫秒数 –  现在的毫秒数   不断转换就可以了 <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body{ font-size:30px; text-align: center; colo
js定时器实例红绿灯效果网页
10-08
采用js、h5、css技术实现一个红绿灯的效果，主要使用了js的定时器技术，亮灯顺序为红-黄-绿-黄-红依次无限循环。由灯杆上的绿色、红色按钮控制开关，绿色控制打开，红色控制关闭
VB红绿灯倒计时代码
02-27
详细的介绍了关于用VB制作红绿灯倒计时的代码。
【javascript】元旦倒计时代码
12-11
实现语言：html、javascript 实现思路： 1、计算当前时间与目标时间直接之间的差值（毫秒数） 2、将差值计算为对应的天数、小时数、分钟数、秒数，赋值给dom元素 3、设置定时器，每一秒钟，重新计算赋值一次，实现...
JavaScript电子时钟倒计时
10-23
主要介绍了JavaScript电子时钟倒计时的实现代码，具有一定的参考价值，感兴趣的朋友可以参考一下
Javascript倒计时代码
10-28
JS脚本是在网上找到的，然后进行了改进，弥补了不足之处。
javascript 倒计时代码
10-29
思路什么的都不错，跟以前的代码不同，也是值得学习的。
JavaScript红绿灯倒计时显示在灯内部
05-25
要实现红绿灯倒计时显示在灯内部，可以使用HTML、CSS和JavaScript。 首先，需要创建一个包含三个圆形灯的HTML结构。每个灯都有一个内部圆形，用于显示倒计时。HTML代码如下： ```html <div class="traffic-light"> <div class="red"></div> <div class="yellow"></div> <div class="green"></div> </div> ``` 接着，使用CSS样式来定义灯的外观和位置。在这里，我们使用绝对定位来将内部圆形放置在灯的中心。CSS代码如下： ```css .traffic-light { position: relative; width: 100px; height: 250px; } .red, .yellow, .green { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; } .red { background-color: red; } .yellow { background-color: yellow; } .green { background-color: green; } ``` 最后，使用JavaScript来实现倒计时功能。可以使用setInterval函数来定时更新内部圆形的文本内容。JavaScript代码如下： ```javascript var red = document.querySelector('.red'); var yellow = document.querySelector('.yellow'); var green = document.querySelector('.green'); function startTimer(element, time) { var interval = setInterval(function() { time--; element.innerText = time; if (time <= 0) { clearInterval(interval); } }, 1000); } startTimer(red, 10); startTimer(yellow, 5); startTimer(green, 15); ``` 在这个例子中，我们使用了startTimer函数来开始倒计时。该函数接受两个参数：一个元素和倒计时的时间。它使用setInterval函数每秒更新内部圆形的文本内容，直到倒计时时间到达0。在这个例子中，我们分别为红、黄、绿三个灯设置了不同的倒计时时间。 完整的代码示例： ```html <!DOCTYPE html> <html> <head> <title>红绿灯倒计时</title> <style> .traffic-light { position: relative; width: 100px; height: 250px; } .red, .yellow, .green { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; } .red { background-color: red; } .yellow { background-color: yellow; } .green { background-color: green; } </style> </head> <body> <div class="traffic-light"> <div class="red"></div> <div class="yellow"></div> <div class="green"></div> </div> <script> var red = document.querySelector('.red'); var yellow = document.querySelector('.yellow'); var green = document.querySelector('.green'); function startTimer(element, time) { var interval = setInterval(function() { time--; element.innerText = time; if (time <= 0) { clearInterval(interval); } }, 1000); } startTimer(red, 10); startTimer(yellow, 5); startTimer(green, 15); </script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值