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

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

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

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

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

启动效果图：

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

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

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

第二步：css美化一下

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

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

            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);}}

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

对了，在这里说一下，我目前是在职web前端开发，如果你现在正在学习前端，了解前端，渴望成为一名合格的web前端开发工程师，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，都可以随时关注并私信我：前端，我都会根据大家的问题给出针对性的建议，缺乏基础入门的视频教程也可以直接来找我，我这边有最新的web前端基础精讲视频教程， 还有我做web前端技术这段时间整理的一些学习手册，面试题，开发工具，PDF文档书籍教程，都可以直接分享给大家。

全部代码在下面：

对了，在这里说一下，我目前是在职web前端开发，如果你现在正在学习前端，了解前端，渴望成为一名合格的web前端开发工程师，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，都可以随时关注并私信我：前端，我都会根据大家的问题给出针对性的建议，缺乏基础入门的视频教程也可以直接来找我，我这边有最新的web前端基础精讲视频教程， 还有我做web前端技术这段时间整理的一些学习手册，面试题，开发工具，PDF文档书籍教程，都可以直接分享给大家。

原文链接：https://blog.csdn.net/qq_46223960/article/details/108968545?utm_medium=distribute.pc_category.none-task-blog-hot-7.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-7.nonecase&request_id=

作者：末安

出处：csdn