红绿灯

最新推荐文章于 2023-05-08 13:48:06 发布

原创最新推荐文章于 2023-05-08 13:48:06 发布 · 298 阅读

CC 4.0 BY-SA版权

部署运行你感兴趣的模型镜像

<!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 id="count" class="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', 'yello', '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>

您可能感兴趣的与本文相关的镜像