1、html内容：


<body><div class="box"><!-- 红灯 --><div id="red"></div><!-- 黄灯 --><div id="yellow"></div><!--绿灯  --><div id="green"></div><!-- 倒计时 --><div id="count" class="count">00</div></div>
</body>

2、css样式：

 <style>/* 居中盒子 */.box {width: 300px;height: 60px;padding: 22px 30px;border: 50px solid #ccc;margin: 0 auto;margin-top: 100px;border-radius: 80px;}/* 红绿灯样式 */.box div {margin-left: 10px;float: left;width: 50px;height: 50px;border-radius: 50px;border: 2px solid #333;color: rgba(0, 0, 0, 0.4);text-align: center;font-size: 24px;line-height: 50px;}/* js需要的类名 */.gray {background-color: #eee;}.red {background-color: rgb(240, 0, 0);}.yellow {background-color: yellow;}.green {background-color: #26ff00;}/* 倒计时样式 */.box .count {width: 50px;color: #666;font-size: 280%;line-height: 50px;padding-top: 5px;margin-left: 15px;border: 0;}</style>

3、Js内容：

<script>// 页面加载完成加载window.onload = function() {var lamp = {// 红灯相关信息red: {obj: document.getElementById("red"),timeout: 30,style: ['red', "gary", 'gary'],next: 'green'},// 黄灯相关信息yellow: {obj: document.getElementById("yellow"),timeout: 5,style: ['gary', "yellow", 'gary'],next: 'red'},// 绿灯相关信息green: {obj: document.getElementById("green"),timeout: 35,style: ['gary', "gary", 'green'],next: 'yellow'},// 设置背景颜色changeStyle(style) {lamp.red.obj.className = style[0];lamp.yellow.obj.className = style[1];lamp.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() {// 剩余时间写入相应信号灯now.obj.innerHTML = timeout - 1 < 10 ? "0" + (timeout - 1) : timeout - 1;// 切换信号灯if (--timeout <= 0) {//    清空不量的信号灯中的时间now.obj.innerHTML = "";// 获取下一个信号灯的数据now = lamp[now.next];// 获取剩余时间timeout = [now.timeout];// 设置信号灯背景颜色lamp.changeStyle(now.style);}// 设置灯亮的剩余时间count.change(timeout);}, 1000)}</script>

以上代码简单的红绿灯倒计时就完成了！

js -制作红绿灯倒计时相关推荐

基于 js 制作一个倒计时
目录前言: 项目效果展示: 代码实现思路: 使用方法: 重点功能讲解: 实现代码: 总结: 前言: 很多网站在做活动时,会出现一个截止时间倒计时的提示,跟随此文做一个倒计时吧! 项目效果展示: 代码 ...
html+css+js制作结婚倒计时网页模板(520/七夕情人节/程序员告白)
❉ html+css+javascript制作结婚倒计时网页模板(520/七夕情人节/程序员告白) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, 引用了C ...
js制作的倒计时特效
"倒计时"这一短语来源于1927年德国的幻想故事片<月球少女>,在这部影片中,导演弗里兹为了增加艺术效果,扣人心弦,在火箭发射的镜头里设计了"9.8.7.-- ...
JS制作支付倒计时页面
(图一) (图二) (图三) (图四) 实现目标一,页面在图一时开始进行倒计时(可以点击取消订单按钮,支付页面消失). 二,倒计时完毕,出现删除订单. 三,单击删除订单,弹出弹框,询问是否要真正删除 ...
js制作秒杀倒计时效果：
需求:将期望时间和现在的时间差显示在页面上,并让这个时间递减,形成倒计时的样子实际运用场景:这个倒计时时间可能是距离秒杀结束时间or距离生日倒计时时间图示: 思路: 定义两个时间对象,一个返回当前 ...
html+css+js制作时间倒计时（时分秒）简易版
效果图展示: 1.先了解获取时间的函数 Date():获取当前系统时间 //获取当前系统时间 var date = new Date(); 2.获取时间的方法 getHours():获取小时值 get ...
使用 FlipClock.js 制作精美的时钟、定时器和倒计时功能
FlipClock.js 被创建出来是因为其他的解决方案不够抽象,不能够在不重写的代码的情况下提供了深层次的自定义.有些库的参数过多,而另外一些则是脚本中的硬编码太多,不够灵活. 在参考许多现有的解决 ...
java利用监听器制作红绿灯_利用js实现简易红绿灯
HTML代码: 在一个div容器内,设置3个span CSS代码: .red_light { width: 200px; height: 200px; border-radius: 50%; marg ...
HTML+CSS+JavaScript制作结婚倒计时网页模板 520情人节表白源码HTML 七夕情人节表白源码HTML 生日祝福代码HTML...
❉ html+css+javascript制作结婚倒计时网页模板(520/七夕情人节/程序员告白) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, ...

js -制作红绿灯倒计时

1、html内容：

2、css样式：

3、Js内容：

js -制作红绿灯倒计时相关推荐

最新文章

热门文章