杨校老师课堂之JavaScript定时器案例的红绿灯设计

Posted xiaoxiao5016

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了杨校老师课堂之JavaScript定时器案例的红绿灯设计相关的知识，希望对你有一定的参考价值。

使用javascript知识完成红绿灯案例

演示效果：

技术图片

 

示例代码：

<!DOCTYPE html>
<html>
 
 
	<head>
		<meta charset="UTF-8">
		<title>红绿灯倒计时</title>
		<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;
			}
		</style>
	</head>
 
 
	<body>
		<div class="box">
			<div id="red"></div>
			<div id="yellow"></div>
			<div id="green"></div>
			<div class="count" id="count"></div>
		</div>
		<script>
			// 获取红、黄、绿灯以及倒计时的元素对象
			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];
				}
			};
			var count = {
				obj: document.getElementById(‘count‘),
				change: function(num) {
					this.obj.innerHTML = (num < 10) ? (‘0‘ + num) : num;
				}
			};
			var now = lamp.green;
			var timeout = now.timeout;
			lamp.changeStyle(now.style);
			count.change(timeout);
			setInterval(function() {
				if(--timeout <= 0) {
					now = lamp[now.next];
					timeout = now.timeout;
					lamp.changeStyle(now.style);
				}
				count.change(timeout);
			}, 1000);
		</script>
	</body>
 
 
</html>

　有看不懂的地方，欢迎留言提问，必将一一解答！

以上是关于杨校老师课堂之JavaScript定时器案例的红绿灯设计的主要内容，如果未能解决你的问题，请参考以下文章

杨老师课堂_Java核心技术下之控制台模拟文件管理器案例

JavaScript的数组知识案例之随机点名器

BOM 操作学习案例

青训营月影老师告诉我写好JavaScript的三大原则之——过程抽象

Linux(程序设计):60---定时机制之SO_RCVTIMEOSO_SNDTIMEO选项（附设置connect超时时间案例）

杨老师课堂之springAOP事务控制源码解析