js定时器实例红绿灯效果图

科技2026-03-04 6

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

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

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

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

启动效果图：

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

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

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

第二步：css美化一下

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

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

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

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

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

全部代码在下面：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0px; padding: 0px; } .all { width: 100%; height: 80vh; background-color: black; padding-top: 20vh } .nos { width: 350px; border: 5px solid gray; display: flex; margin: auto; border-radius: 15em; padding: 10px; } .no1 { background-color: red; width: 100px; height: 100px; margin: auto; border-radius: 15em; background: radial-gradient(circle 100px,red,black); border: 2px solid red; } .no2 { background-color: green; width: 100px; height: 100px; margin: auto; border-radius: 15em; background: radial-gradient(circle 100px,green,black); border: 2px solid green; } .no3 { background-color: yellow; width: 100px; height: 100px; margin: auto; border-radius: 15em; background: radial-gradient(circle 100px,yellow,black); border: 2px solid yellow; } .gan{ width: 3%; height: 50vh; margin: auto; border: 5px solid gray; border-radius: 0 0 1em 1em; } .open{ width: 5px; height: 2vh; border: 1px solid gray; background-color: green; border-radius: 0 0.5em 0.5em 0; position: absolute; left: 52%; top: 65vh; } .close{ width: 5px; height: 2vh; border: 1px solid gray; background-color: red; border-radius: 0 0.5em 0.5em 0; position: absolute; left: 52%; top: 68vh; } </style> <script> function m1() { document.getElementById("no1").style.transition = "2s"; document.getElementById("no1").style.boxShadow = "0px 0px 200px 100px red"; document.getElementById("no2").style.boxShadow = "0px 0px 0px 0px green"; document.getElementById("no3").style.boxShadow = "0px 0px 0px 0px yellow"; } function m2() { document.getElementById("no2").style.boxShadow = "0px 0px 200px 100px green"; document.getElementById("no1").style.boxShadow = "0px 0px 0px 0px red"; document.getElementById("no3").style.boxShadow = "0px 0px 0px 0px yellow"; document.getElementById("no2").style.transition = "2s"; } function m3() { document.getElementById("no3").style.boxShadow = "0px 0px 200px 100px yellow"; document.getElementById("no2").style.boxShadow = "0px 0px 0px 0px green"; document.getElementById("no1").style.boxShadow = "0px 0px 0px 0px red"; document.getElementById("no3").style.transition = "2s"; } var num = 1; var count = 0; function ms() { switch (num) { case 1: m1(); num++; break; case 2: m3(); if (count==0) { num++; count++; } else{ num--; count--; } break; case 3: m2(); num--; break; } } var count1=0; var start = null; function b1(){ if(count1==0){ count1=1; start=setInterval(ms, 2000); } } function b2(){ if (count1==1) { count1=0; clearInterval(start); } } </script> </head> <body> <div class="all"> <div class="nos"> <div id="no1" class="no1"></div> <div id="no3" class="no3"></div> <div id="no2" class="no2"></div> </div> <div class="gan"></div> <input type="button" id="open" class="open" onclick="b1()" /> <input type="button" id="close" class="close" onclick="b2()" /> </div> </body> </html>

结尾：

本博客有该源码的下载。

制作不易，请各位看官点个小小的赞，在下感激不尽，你非要三连我也没办法（狗头保命），哈哈。

Processed: 0.011, SQL: 10