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方法关闭定时器，让它暂停循环。

全部代码在下面：

 

 结尾：

本博客有该源码的下载。

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