js定时器实现红绿灯效果

最新推荐文章于 2023-12-20 08:24:51 发布
转载 最新推荐文章于 2023-12-20 08:24:51 发布 · 1.7k 阅读 · 5 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/qq_46223960/article/details/108968545

利用js定时器制作了一个红绿灯

欢迎观看《好看的博文没人赞》——系列

本文章为转载《好看的博文没人赞之末安》

先来一波效果图，兴趣是各位看官最好的使然，有兴趣可以继续往下面看：

 按绿色按钮启动，红灯亮起，顺序依次为：红-》黄-》绿-》黄-》红

启动效果图：

按红色按钮暂停后，灯光保持不动：

各位看官能看到这里，肯定是由兴趣继续下去的，那咋们就开始代码界面：

第一步：咋们需要一个黑色的全屏背景，一个红绿灯杆，三盏灯（红、黄、绿），两个按钮控制开关


 

  1. <div class="all">

  2. <div class="nos">

  3. <div id="no1" class="no1"></div>

  4. <div id="no3" class="no3"></div>

  5. <div id="no2" class="no2"></div>

  6. </div>

  7. <div class="gan"></div>

  8. <input type="button" id="open" class="open" onclick="b1()"/>

  9. <input type="button" id="close" class="close" onclick="b2()"/>

  10. </div>

第二步：css美化一下

让它看起来第一眼是个红绿灯


 

  1. <style>

  2. * {

  3. margin: 0px;

  4. padding: 0px;

  5. }

  6.  

  7. .all {

  8. width: 100%;

  9. height: 80vh;

  10. background-color: black;

  11. padding-top: 20vh

  12. }

  13.  

  14. .nos {

  15. width: 350px;

  16. border: 5px solid gray;

  17. display: flex;

  18. margin: auto;

  19. border-radius: 15em;

  20. padding: 10px;

  21. }

  22.  

  23. .no1 {

  24. background-color: red;

  25. width: 100px;

  26. height: 100px;

  27. margin: auto;

  28. border-radius: 15em;

  29. background: radial-gradient(circle 100px,red,black);

  30. border: 2px solid red;

  31. }

  32.  

  33. .no2 {

  34. background-color: green;

  35. width: 100px;

  36. height: 100px;

  37. margin: auto;

  38. border-radius: 15em;

  39. background: radial-gradient(circle 100px,green,black);

  40. border: 2px solid green;

  41. }

  42.  

  43. .no3 {

  44. background-color: yellow;

  45. width: 100px;

  46. height: 100px;

  47. margin: auto;

  48. border-radius: 15em;

  49. background: radial-gradient(circle 100px,yellow,black);

  50. border: 2px solid yellow;

  51. }

  52. .gan{

  53. width: 3%;

  54. height: 50vh;

  55. margin: auto;

  56. border: 5px solid gray;

  57. border-radius: 0 0 1em 1em;

  58. }

  59. .open{

  60. width: 5px;

  61. height: 2vh;

  62. border: 1px solid gray;

  63. background-color: green;

  64. border-radius: 0 0.5em 0.5em 0;

  65. position: absolute;

  66. left: 52%;

  67. top: 65vh;

  68. }

  69. .close{

  70. width: 5px;

  71. height: 2vh;

  72. border: 1px solid gray;

  73. background-color: red;

  74. border-radius: 0 0.5em 0.5em 0;

  75. position: absolute;

  76. left: 52%;

  77. top: 68vh;

  78. }

  79. </style>

第三步：做动态效果了 ，灯亮起来的样子，三个灯当然要准备三个方法了，谁亮咋用谁，他亮的时候，其他的不准亮


 

  1. function m1() {

  2. document.getElementById("no1").style.transition = "2s";

  3. document.getElementById("no1").style.boxShadow = "0px 0px 200px 100px red";

  4. document.getElementById("no2").style.boxShadow = "0px 0px 0px 0px green";

  5. document.getElementById("no3").style.boxShadow = "0px 0px 0px 0px yellow";

  6. }

  7.  

  8. function m2() {

  9. document.getElementById("no2").style.boxShadow = "0px 0px 200px 100px green";

  10. document.getElementById("no1").style.boxShadow = "0px 0px 0px 0px red";

  11. document.getElementById("no3").style.boxShadow = "0px 0px 0px 0px yellow";

  12. document.getElementById("no2").style.transition = "2s";

  13. }

  14.  

  15. function m3() {

  16. document.getElementById("no3").style.boxShadow = "0px 0px 200px 100px yellow";

  17. document.getElementById("no2").style.boxShadow = "0px 0px 0px 0px green";

  18. document.getElementById("no1").style.boxShadow = "0px 0px 0px 0px red";

  19. document.getElementById("no3").style.transition = "2s";

  20. }

 第四步：逻辑地方来了，从谁开始亮，亮多久，第一亮了，第二个谁来亮，第三个。。。

红->黄->绿->黄->红，在这样一直循环


 

  1. var num = 1;

  2. var count = 0;

  3.  

  4. function ms() {

  5. switch (num) {

  6. case 1:

  7. m1();

  8. num++;

  9. break;

  10. case 2:

  11. m3();

  12. if (count==0) {

  13. num++;

  14. count++;

  15. } else{

  16. num--;

  17. count--;

  18. }

  19. break;

  20. case 3:

  21. m2();

  22. num--;

  23. break;

  24. }

  25. }

  26. var count1=0;

  27. var start = null;

  28. function b1(){

  29. if(count1==0){

  30. count1=1;

  31. start=setInterval(ms, 2000);

  32. }

  33. }

  34. function b2(){

  35. if (count1==1) {

  36. count1=0;

  37. clearInterval(start);

  38. }

  39. }

 

上面的b1是定时器启动，并且是2s/次（2000ms/次）的速度的，b2是定时器关闭，看官想知道什么是定时器吗？定时器就是以多少毫秒的速度循环使用指定函数，这样就可以实现2s/次的速度循环亮灯了，最后依靠b2方法关闭定时器，让它暂停循环。

全部代码在下面：


 

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="utf-8" />

  5. <title></title>

  6. <style>

  7. * {

  8. margin: 0px;

  9. padding: 0px;

  10. }

  11.  

  12. .all {

  13. width: 100%;

  14. height: 80vh;

  15. background-color: black;

  16. padding-top: 20vh

  17. }

  18.  

  19. .nos {

  20. width: 350px;

  21. border: 5px solid gray;

  22. display: flex;

  23. margin: auto;

  24. border-radius: 15em;

  25. padding: 10px;

  26. }

  27.  

  28. .no1 {

  29. background-color: red;

  30. width: 100px;

  31. height: 100px;

  32. margin: auto;

  33. border-radius: 15em;

  34. background: radial-gradient(circle 100px,red,black);

  35. border: 2px solid red;

  36. }

  37.  

  38. .no2 {

  39. background-color: green;

  40. width: 100px;

  41. height: 100px;

  42. margin: auto;

  43. border-radius: 15em;

  44. background: radial-gradient(circle 100px,green,black);

  45. border: 2px solid green;

  46. }

  47.  

  48. .no3 {

  49. background-color: yellow;

  50. width: 100px;

  51. height: 100px;

  52. margin: auto;

  53. border-radius: 15em;

  54. background: radial-gradient(circle 100px,yellow,black);

  55. border: 2px solid yellow;

  56. }

  57. .gan{

  58. width: 3%;

  59. height: 50vh;

  60. margin: auto;

  61. border: 5px solid gray;

  62. border-radius: 0 0 1em 1em;

  63. }

  64. .open{

  65. width: 5px;

  66. height: 2vh;

  67. border: 1px solid gray;

  68. background-color: green;

  69. border-radius: 0 0.5em 0.5em 0;

  70. position: absolute;

  71. left: 52%;

  72. top: 65vh;

  73. }

  74. .close{

  75. width: 5px;

  76. height: 2vh;

  77. border: 1px solid gray;

  78. background-color: red;

  79. border-radius: 0 0.5em 0.5em 0;

  80. position: absolute;

  81. left: 52%;

  82. top: 68vh;

  83. }

  84. </style>

  85. <script>

  86. function m1() {

  87. document.getElementById("no1").style.transition = "2s";

  88. document.getElementById("no1").style.boxShadow = "0px 0px 200px 100px red";

  89. document.getElementById("no2").style.boxShadow = "0px 0px 0px 0px green";

  90. document.getElementById("no3").style.boxShadow = "0px 0px 0px 0px yellow";

  91. }

  92.  

  93. function m2() {

  94. document.getElementById("no2").style.boxShadow = "0px 0px 200px 100px green";

  95. document.getElementById("no1").style.boxShadow = "0px 0px 0px 0px red";

  96. document.getElementById("no3").style.boxShadow = "0px 0px 0px 0px yellow";

  97. document.getElementById("no2").style.transition = "2s";

  98. }

  99.  

  100. function m3() {

  101. document.getElementById("no3").style.boxShadow = "0px 0px 200px 100px yellow";

  102. document.getElementById("no2").style.boxShadow = "0px 0px 0px 0px green";

  103. document.getElementById("no1").style.boxShadow = "0px 0px 0px 0px red";

  104. document.getElementById("no3").style.transition = "2s";

  105. }

  106.  

  107. var num = 1;

  108. var count = 0;

  109.  

  110. function ms() {

  111. switch (num) {

  112. case 1:

  113. m1();

  114. num++;

  115. break;

  116. case 2:

  117. m3();

  118. if (count==0) {

  119. num++;

  120. count++;

  121. } else{

  122. num--;

  123. count--;

  124. }

  125. break;

  126. case 3:

  127. m2();

  128. num--;

  129. break;

  130. }

  131. }

  132. var count1=0;

  133. var start = null;

  134. function b1(){

  135. if(count1==0){

  136. count1=1;

  137. start=setInterval(ms, 2000);

  138. }

  139. }

  140. function b2(){

  141. if (count1==1) {

  142. count1=0;

  143. clearInterval(start);

  144. }

  145. }

  146.  

  147. </script>

  148. </head>

  149. <body>

  150. <div class="all">

  151. <div class="nos">

  152. <div id="no1" class="no1"></div>

  153. <div id="no3" class="no3"></div>

  154. <div id="no2" class="no2"></div>

  155. </div>

  156. <div class="gan"></div>

  157. <input type="button" id="open" class="open" onclick="b1()" />

  158. <input type="button" id="close" class="close" onclick="b2()" />

  159. </div>

  160. </body>

  161. </html>

 

js定时器实例红绿灯效果网页
10-08
采用js、h5、css技术实现一个红绿灯的效果，主要使用了js的定时器技术，亮灯顺序为红-黄-绿-黄-红依次无限循环。由灯杆上的绿色、红色按钮控制开关，绿色控制打开，红色控制关闭
js定时器实例红绿灯效果图
末安的博客
10-08 4450
利用js定时器制作了一个红绿灯 欢迎观看《好看的博文没人赞》——系列 先来一波效果图，兴趣是各位看官最好的使然，有兴趣可以继续往下面看： 按绿色按钮启动，红灯亮起，顺序依次为：红-》黄-》绿-》黄-》红 启动效果图： 按红色按钮暂停后，灯光保持不动： 各位看官能看到这里，肯定是由兴趣继续下去的，那咋们就开始代码界面： 第一步：咋们需要一个黑色的全屏背景，一个红绿灯杆，三盏灯（红、黄、绿），两个按钮控制开关 <div class="all"> <.
js 定时器_js定时器实例红绿灯效果图
weixin_39652646的博客
12-03 483
利用js定时器制作了一个红绿灯欢迎观看《好看的博文没人赞》——系列先来一波效果图，兴趣是各位看官最好的使然，有兴趣可以继续往下面看： 按绿色按钮启动，红灯亮起，顺序依次为：红-》黄-》绿-》黄-》红启动效果图：按红色按钮暂停后，灯光保持不动：各位看官能看到这里，肯定是由兴趣继续下去的，那咱们就开始代码界面：第一步：咱们需要一个黑色的全屏背景，一个红绿灯杆，三盏灯(红、黄、绿)，两个按钮控制开关 ...
JS 中使用Promise 实现红绿灯实例代码(demo)
12-29
要求 使用promise 实现红绿灯颜色的跳转 绿灯执行三秒后 黄灯执行四秒后 红灯执行五秒 html 实现如下： 定义一个空类，之后再js中操作对应的类名即可实现相关的效果。 CSS实现如下： ul { position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; transform: tr
linux脚本实现红绿灯,javascript 如何实现红绿灯效果呢？
weixin_36275071的博客
05-04 348
摘要:下文讲述js实现红绿灯效果的方法分享，如下所示:实现思路:1.使用setinterval 重复调用颜色输出函数2.使用promise实现例://使用setInterval实现循环调用函数var n = 0;function setRYG () {if (n % 3 == 0) { console.log('red') }else if (n % 3 == 1) { console.log('...
js定时器实现倒计时效果
01-19
本文实例为大家分享了js定时器实现倒计时效果展示的具体代码，供大家参考，具体内容如下 日期函数 倒计时 = 用 将来的时间 – 现在的时间  问题：将来时间 距离 1970 毫秒数 – 现在距离 1970年1  用将来的...
使用５１定时器实现红绿灯控制
05-14
本项目利用了51单片机，通过其内置的定时器和中断功能，实现了东西南北四个方向红绿灯的自动切换。下面将详细介绍这个系统的工作原理、定时器中断的使用以及51单片机的相关知识。 51单片机是广泛应用的一种微控制器...
JS交通红绿灯动画特效
04-25
在JavaScript（JS）编程中，实现交通红绿灯动画特效是一项常见的应用场景，特别是在网页交互设计或者教学示例中。这个特效通常包括红灯、黄灯和绿灯的切换，并且带有秒数倒计时功能，使得模拟更加真实。下面我们将...
HTML5实现红绿灯效果及控制开关
通过定时器触发的函数，我们可以周期性地更新这个变量，并随之更新页面上的显示状态，来实现红绿灯效果的无限循环。 此外，我们还需要为灯杆上的两个按钮添加JavaScript事件监听器，以便实现打开和关闭红绿灯效果的...
JavaScript实现红绿灯变换
最新发布
Z_JTF的博客
12-20 506
红绿灯
运用js实现红绿灯效果
10-15
通 过 html 与 Javascript 实 现 简 单 的 红 绿 灯 效 果 ，分 享 给 大 家
利用js实现简易红绿灯
01-18
HTML代码： 在一个div容器内，设置3个span <body> <div id=i1> <span class=light></span> <span class=light></span> <span class=light></span> </div> CSS代码： <style> .red_light { width: 200px; height: 200px; border-radius: 50%; margin-left:
用定时器计数器实现交通灯
11-23
C语言版交通灯，用定时器和计数器实现。涉及到了联合定时，中断，外部扩展等知识，希望对大家学习有用！
使用JavaScript实现红绿灯切换
我是小奶音啊的博客
12-29 1596
使用JavaScript实现红绿灯切换 function getLight(first,second,third){ first(second,third); } function getRedLight(fn,fn1){ var f=arguments.callee; var ids=setT...
用js实现红绿灯
qq_48758340的博客
04-15 6326
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、红绿灯二、使用步骤1.定义flag标记 前言 用js实现红绿灯 提示：以下是本篇文章正文内容，下面案例可供参考 一、红绿灯 示例：通过定时器、flag标记实现倒计时以及红绿灯的切换。 二、使用步骤 1.定义flag标记 var flag=1; //初始为1，‘1’代表红灯 ‘2’代表绿灯 ‘3’代表黄灯 代码如下（示例）： <!DOCTYPE html> <html lang="en"&.
JS实现一个可以配置的红绿灯
进击的葱
03-01 1516
转载——https://juejin.im/post/5c76357f51882540713f5717 【javascript】一个可以配置的红绿灯 需求 实现一个信号灯，这个信号灯，有黄绿红，他们各自亮灯的持续时间是 1s,2s,3s 如此反复。 前景提要，我们的html代码是这样： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &l...
用原生js实现红绿灯的效果（简单）
m0_65433878的博客
01-15 1410
用js实现红绿灯效果，其中使用到了H5的自定义属性，通过对DOM的操作实现背景颜色的切换。 <div id="box" class="box"> <div data-color="red"></div> <div data-color="green"></div> <div data-color="yellow"></div> </div>
js面试题－－红绿灯切换效果
小白变怪兽
03-03 8151
红绿灯切换效果
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值