杨老师课堂之JavaScript定时器案例的红绿灯设计-低调大师

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

2018-07-31 500

<!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://yq.aliyun.com/articles/675130

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

经济学人：Python为什么是编程语言中最skr的？

Python的出现让计算机编程语言不再是生僻的专业技能，而是常人都能学习和使用的万金油。《经济学人（Economist）》近日对Python的一篇专题报道，揭秘了这一把计算机思维带入寻常百姓家的神奇编程语言。 Python在今天编程界的火热流行度，借助凡凡的一句话，那就是：诞生于1989年12月，Python最初是荷兰计算机科学家Guido van Rossum为自己设立的一个的圣诞项目。由于当时的其他编程语言都有各种缺点，这位科学家就想创建自己的编程语言。而他建立编程语言的原则也很简单：首先，作为编程语言它应该易于阅读，一个板块内的每行命令只要采用缩进格式书写即可，而不用被层层的花括号括起来；其次，它应该让用户可以创建自己的专用编码模块包，然后可以将其提供给其他人，使其作为新程序编写的基础；第三，他想要一个“简短、独特且略带神秘”

2018-08-01

628

HashMap的put怎么实现，如何解决hash冲突。调用putval，计算相应hash码，然后初始化（默认64的capacity）或调用resize函数调整大小，判断bucket是否有值，若没有在数组初始化改值。若有则以拉链法（链表的形式）解决hash冲突，这里和ThreadLocalMap不一样，ThreadLocalMap使用的是线性探测法，接着将相应节点加入链表头部。如果超过8个元素会进化为RBtree，防止hash攻击。 RBtree是怎样的数据结构，有什么性质？二叉树，有序的，四种性质。从而推得路径最长2n，最短n。复杂度为log2N.（此处省略n多话，感兴趣的同学请自行Google） RBtree什么时候会变色？旋转时，共有四种旋转方式。一般是为了保持平衡，如左边太长，右边太短这样。（打哈哈过去，具体记不清了） hashmap什么时候会调整大小？根据负载因子来搞事，默认为0.75。什么是负载因子？根据capacity来，举个例子，当capacity为100时，如果HashMap的ele的数量到了75就会resize，resize后的大小为原来的2倍，这样可以直...

2018-08-01

629

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。