红绿灯倒计时

1、实现效果

绿(35秒)→黄(5秒)→红(30秒)→绿(35秒)…依次循环

2、代码分析

首先编写html代码要用到盒子模型，还要用css来布置盒子模型的样式。其次编写JavaScript代码，先创建红、黄、绿灯对象，保存相关数据，设置信号背景灯样式。然后创建倒计时对象，实现倒计时的时间设置。初始化页面，根据lamp对象和count对象分别获取并设置绿灯亮时的页面初始化。实现红绿灯倒计时，利用setInterval()函数完成信号灯倒计时的动态改变效果。

3、代码实现
3.1 编写HTML代码
<body>
		<div class="box">
			<div id="red"></div>  <!-- 红灯 -->
			<div id="yellow"></div>  <!--黄灯 -->
			<div id="green"></div>  <!-- 绿灯 -->
			<div id="count" class="count"></div>  <!-- 倒计时 -->
		</div>
3.2 编写盒子模型样式

两种样式编写均可实现

<style>
		/* .box{width:250px;height:52px;padding:15px 30px;border:2px solid #ccc;border-radius:16px;margin:0 auto;}
		.box .count{width:60px;color:#666;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 #666;}
		.gray{background-color:#eee;}
		.red{background-color:red;}
		.yellow{background-color:yellow;}
		.green{background-color:#26ff00;} */
		.box{width:290px;height:70px;border-radius:10px;border:1px solid black;}
		.box div{float:left;margin-left:20px;width:45px;height: 45px;border-radius: 45px;border:1px solid purple;margin-top: 10px;}
		.box .count{width: 60px;border: 0px;font-size: 280%;}
		.red{background-color:red ;}
		.yellow{background-color: yellow;}
		.green{background-color: green;}
	</style>
3.3 创建红绿灯对象
var lamp={
				red:{  //红灯相关数据
					obj:document.getElementById("red"),					
					timeout:30,
					style:['red','gray','gray'],
					next:'green'
				},
				yellow:{  //黄灯相关数据
					obj:document.getElementById("yellow"),
					timeout:5,
					style:['gray','yellow','gray'],					
					next:'red'
				},
				green:{  //绿灯相关数据
					obj:document.getElementById("green"),
					timeout:35,
					style:['gray','gray','green'],					
					next:'yellow'
				},
				changeStyle(style){  //设置信号背景色样式
					this.red.obj.className=style[0];
					this.yellow.obj.className=style[1];
					this.green.obj.className=style[2];
				}				
			};

obj：存储信号灯的元素对象；
timeout：存储对应信号灯剩余亮灯时间；
style：存储某信号灯亮时，红绿灯元素背景色的class名称，数组元素 保存的信号灯顺序为红黄绿；
next：存储下一次亮灯的信号灯。

3.4 创建倒计时对象
var count={
				obj:document.getElementById('count'),  //倒计时的元素对象
				change:function(num){
					this.obj.innerHTML=(num<10)?('0'+num):num;
				}
			};

change()方法的参数num表示信号灯的倒计时时间，并以两位数字的格式将num显示到对应位置。

3.5 初始化页面
var now=lamp.green;           //获取绿灯亮的相关数据
			var timeout=now.timeout;      //获取绿灯亮灯的剩余时间
			lamp.changeStyle(now.style);  //设置绿灯亮时,红绿灯背景色样式
			count.change(timeout);        //设置绿灯亮灯的剩余时间
3.6 实现红绿灯倒计时
setInterval(function(){
				if(--timeout<=0){         //切换信号灯
					now=lamp[now.next];   //获取下一个亮灯的信号灯的相关数据
					timeout=now.timeout;  //获取信号灯的剩余时间
					lamp.changeStyle(now.style); //设置信号灯背景色样式
				}
				count.change(timeout);    //设置信号灯亮灯的剩余时间
			},1000);

利用setInterval()函数，在初始化页面后每隔1秒钟间歇调用一次匿名函数。若当前亮灯的剩余时间减1小于等于0后，切换信号灯，重新获取信号灯样式及亮灯的剩余时间。