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

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

杨老师课堂之JavaScript定时器限时抢购秒杀商品案例
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/kese7952/article/details/80346509 预览效果图: 使用到的知识点: 定 ...
杨老师课堂之JavaScript定时器_农夫山泉限时秒杀案例
预览效果图: 使用到的知识点: 定时器 setInterval(函数,毫秒):在指定的毫秒数后调用函数或执行一段代码取消定时器 clearInterval:取消由setInterval设置的定时器 ...
杨老师课堂之JavaScript悬浮事件（鼠标移入移出事件）
今天给大家分享一个简单的JavaScript事件案例: 该事件属于悬浮事件改代码逻辑非常简单,主要是当鼠标移动到按钮上显示一个盒子,移开之后盒子隐藏 JavaScript事件中 onmouseov ...
杨老师课堂之网页制作HTML的学习入门-含有案例
网页制作入门 - Html的学习本篇所授任务网站信息页面案例网站图片信息页面案例网站友情链接页面案例网站首页案例网站注册页面案例网站后台页面案例教学导航教学目标了解什么是标记语言 ...
台州杨老师课堂 UI设计培训班
课程内容一.图形界面设计基础 1.Photoshop 应用通过各种不同风格网页整体GUI设计,掌握photoshop相关软件操作基础,熟练使用更重要是学会直接应用软件,通过项目实训直接设计. 2. ...
杨老师课堂之JavaWeb网站技术架构总结
题记有很多学生及一线的开发人员经常会问我到底是什么技术架构,是不是就是目前在学校的SSH.SSM技术,为了让更多的同行对架构这个词汇有更深刻的理解,我分享一下自己的个人见解.从编程开发到IT教学也有 ...
杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
JavaScript案例之跑马灯左右无缝连接效果图: 思路: 1.先做界面 1.1 制作一个大盒子,进行存放整个图片及按钮区域 1.2 制作两个按钮和中间区域盒子 1.3 中间区域盒子中使用无序列表 ...
杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)
1 筛选[掌握]  筛选与之前"选择器"雷同,筛选提供函数 1.1 过滤 eq(index|-index),获取第N个元素 •index:一个整数,指示元素基于0的位置,这个元素 ...
杨校老师课堂之JavaScript右下角广告弹框教程
案例制作思路: 1.先制作界面添加一个盒子包含一个按钮,使盒子绝对定位在右上角添加一个大盒子,同理,将盒子居于左下角:其中内部包含一个顶端盒子和底部盒子顶端盒子因为是属于大盒子内部的存在,所以宽 ...

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

效果图：

代码

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

最新文章

热门文章