红绿灯[][][][]

红绿灯

// 上代码

<!DOCTYPE html>
<html lang="en">
<head>
<title> </title><style>* { margin: 0; padding:0}.box {width: 250px;height: 52px;padding: 15px 30px;border: 2px solid #ccc;/* border-radius: 16px; */border-radius: 50px;margin: 0 auto;}.box .count {/* overflow: hidden; */width: 60px;height: 50px;line-height: 50px;color: rgb(27, 4, 4);font-size: 50px;margin-left: 10px;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='green'></div><div id='yellow'></div><div id='count' class='count'></div></div>
<script type="text/javascript">function $(id){ return document.getElementById(id)}// 三种指示灯的数据 键值对存储数据var lamp= {red: {obj: $('red'),style: ['red', 'gray', 'gray'],timeOut: 30,next: 'green'},green: {obj: $('green'),style: ['gray', 'green', 'gray'],timeOut: 35,next: 'yellow'},yellow: {obj: $('yellow'),style: ['gray', 'gray', 'yellow'],timeOut: 5,next: 'red'},changeStyle(style){this.red.obj.className=style[0];this.green.obj.className= style[1];this.yellow.obj.className= style[2];}};var count = {obj:$('count'),change: function(num){this.obj.innerHTML= (num>=10)? num: '0'+num;}}// 初始化界面var now= lamp.green;//var timeout= now.timeOut;lamp.changeStyle(now.style);count.change(timeout);// setInterval()方法 计时器完成动态修改setInterval(function(){if(--timeout <= 0){ //根据count数值 条件操作divnow= lamp[now.next];timeout= now.timeOut;lamp.changeStyle(now.style);}count.change(timeout);}, 1000 );
</script>
</body></html>

红绿灯[][][][]相关推荐

吴甘沙：天外飞“厕”、红绿灯消失，未来无人驾驶将被重新定义 | AI ProCon 2019
2019 年9 月 5 日至 7 日,由新一代人工智能产业技术创新战略联盟(AITISA)指导,鹏城实验室.北京智源人工智能研究院支持,专业中文 IT 技术社区 CSDN 主办的 2019 中国 AI ...
吴甘沙：天外飞“厕”、红绿灯消失，未来无人驾驶将被重新定义
整理 | 夕颜出品 | AI科技大本营(ID:rgznai100) 2019 年9 月 5 日至 7 日,由新一代人工智能产业技术创新战略联盟(AITISA)指导,鹏城实验室.北京智源人工智能研究院 ...
马斯克：我有一个大胆的想法！给红绿灯加个AI视觉「外挂」
转载自:视学算法编辑:好困 [导读]大半夜的,四下无人又没车,为何还要我等这么久的红灯?这两天,马斯克也在思考这个问题. 对于社畜来说,大城市的交通无非分为两种: 白天不让上班:晚上不让回家 ...
红绿灯问题（位运算）
考虑一十字路口,每个路口有三盏红绿灯,分别指明能否左转.右转及直行.共有12盏,现在要为它编写一个控制程序,不管这程序的功能怎样,首先需要将红绿灯的状态转化为数字,因为电脑只知道数字.所以用3个数字分 ...
ALV显示红绿灯(FMnbsp;ALVnbsp;和nbsp;OOnbsp;ALV两…
FM 方式ALV 红绿灯 *&---------------------------------------------------------------------* *& Rep ...
三菱plc编程实例3000_三菱PLC十字路口的红绿灯编程实例
点击↑↑上方关注,回复100领取电气控制100例. 十字路口车辆穿梳,行人熙攘,车行车道,人行人道,有条不紊.那么靠什么来实现这井然秩序呢?靠的是交通信号灯的自动指挥系统,下面介绍三菱PLC编程实现的 ...
坡道行驶电动小车_事发红绿灯路口！东莞一女子骑电动滑板车被撞致颅内出血…...
东莞的小伙伴们应该都在路上见过电动滑板车一些上班族平时都用它代步但大家在享受电动滑板车的便捷时一定要提高安全意识否则就容易发生意外!事件回顾近日在东莞厚街S256省道濠畔红绿灯路口发生一起电动滑板车与 ...
交叉路口红绿灯控制程序linux,PLC十字路口的交通灯控制编程实例！
原标题:PLC十字路口的交通灯控制编程实例! 1. 控制要求十字路口交通灯的运行如下图所示.当起动开关接通时,信号灯系统开始工作,且先南北红灯亮,东西绿灯亮.当起动开关断开时,所有的信号灯全部熄灭. ...
vb红绿灯自动切换_什么是自动驻车
自动驻车(AUTO HOLD),此功能就相当于替你踩住了刹车,抬起刹车后仍能提供驻车制动力. 这个功能特别适用于上下坡以及频繁起步停车的时候.比如在停车等红绿灯的时,相当于不用拉手刹,可以避免使用手刹 ...
python控制51单片机的红绿灯_基于51单片机的红绿灯实现（使用普中科技开发板）...
C语言基础比较薄弱,红绿灯的倒计时和切换上,用了三个if()嵌套,总感觉应该有更好的方案,如果你恰巧知道,请教教我,在此谢过.以下是程序部分: //红绿灯设计:利用定时器实现LED灯亮灭,数码管倒计时 ...

红绿灯[][][][]

红绿灯

红绿灯[][][][]相关推荐

最新文章

热门文章