杨校老师课堂之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>

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

原文地址:https://www.cnblogs.com/xiaoxiao5016/p/10893515.html

时间: 2024-10-01 21:04:52

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

杨老师课堂由杨亦涛主讲

杨老师课堂由杨亦涛主讲,他是资深网站工程师和UI设计讲师,10年网站开发与教学经验,上百个网站项目成功案例. 擅长技术:UI界面视觉.UI界面交互.网站设计及开发. 曾担任高级网站工程师,主持各种大型网站设计与开发,主攻UI界面视觉.UI界面交互. 曾就职大业工业设计公司.四川九洲电子集团等知名企业. 曾自主创建亦涛工作室,专门从事网站建设.软件开发等业务. 原文地址:https://www.cnblogs.com/yangsir0576/p/10712432.html

杨老师课堂之ArrayList集合常用方法解析

ArrayList集合常用方法的解析 1.概述 ? 在前面我们学习了数组,数组可以保存多个元素,但在某些情况下无法确定到底要保存多少个元素,此时数组将不再适用,因为数组的长度不可变.例如,要保存一个学校的学生,由于不停有新生来报道,同时也有学生毕业离开学校,这时学生的数目很难确定.为了保存这些数目不确定的元素,JDK中提供了一系列特殊的类,这些类可以存储任意类型的元素,并且长度可变,统称为集合.在这里,我们先介绍ArrayList集合,其他集合在后续课程中学习. ? ArrayList集合是程序

移动 Web 与 JavaScript 定时器

转载自:https://www.imququ.com/post/mobile_web_and_js_timer.html 在之前博客中,我曾经写过「PC 上的 Firefox.Chrome 和 Safari 等浏览器,都会自动把未激活页面中的 JavaScript 定时器(setTimeout.setInterval)间隔最小值改为 1 秒以上:而移动设备上的浏览器往往会直接冻结未激活页面上的所有定时器」.今天继续聊一聊 JavaScript 定时器与移动 Web 这个话题. 计时器 最简单的计

js定时器案例

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <title>定时器案例</title>     <script>         var myCount = 5;         function count() {             document.getElementById("test&q

Javascript定时器(三)——setTimeout(func, 0)

setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type="text/javascript"> function delay1() { console.log('delay1'); } function delay2() { console.log('delay2'); } function delay3() { console.log('dela

Javascript定时器(二)——setTimeout与setInterval

一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 setTimeout: var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]); var timeoutID = window.setTimeout(code, delay); timeoutID 是该延时操作的数字ID,

杨涛老师MvcPager示例

杨涛老师插件地址:http://www.webdiyer.com/mvcpager 杨涛老师网站上示例写的很详细了,参考他的示例和帮助文档就可以运用的很好了,有经验的同学可以直接参考官方示例. 一.标准的ajax分页 1.新建一个空的MVC项目 2.搜索安装 MvcPager 3.控制器中添加方法 1  /// <summary  2  /// 单个分页  3  /// </summary> 4 /// <returns></returns> 5 [HttpGet

JavaScript定时器越走越快的问题

目录 JavaScript定时器越走越快的问题 (setinterval)多次初始化 清除(clearInterval)的失效 解决方法 JavaScript定时器越走越快的问题 之前在项目中写了定时器来做循环播放,但是总是会有越走越快的问题,开始是以为前后的HTML代码拼接的有问题,时间紧急的情况下反复改了很多也没什么效果,后来发现是js定时器的问题,在这里记录一下. (setinterval)多次初始化 使用js定时器(setinterval)首要的问题就是要记得清除,即调用(clearIn

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

spring AOP基于动态代理实现,想看懂源码必须了解动态代理和字节码增强方面的知识. 基于对spring各种配置的了解,首先我们先从DataSourse由谁来管理入手.了解AOP. 一般来讲首先会配置一个datasource,至于你配置什么连接池还是用JNDI这里就不提到细节,总之我们认为配置的spring的全局名称为dataSource就可以了. 接下来会将datasource交给各种连接池的操作类,如:ibatis.jdbcTemplate等等,这些不是我们关心的重点,我们需要关心的是d