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

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

2018-07-31 551

<!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-07-31

685

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-07-31

683

资源下载

更多资源

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。