js -制作红绿灯倒计时

电玩女神 2023-01-04 10:29 82阅读 0赞

# 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>

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

发表评论取消回复

表情：

评论列表（有 0 条评论，82人围观）

还没有评论，来说两句吧...

相关阅读

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

1、html内容： <body> <div class="box">  <d

电玩女神/ 2023年01月04日 10:29/ 0 赞/ 83 阅读

相关 mysql设计高考倒计时_HTML/CSS+JS制作一个高考倒计时页面

2020-07-09更新修复倒计时归零后出现负数的bug 自动切换至下一年日期效果展示 ![223f90991b5652d9f79d92938a0050da.png

系统管理员/ 2022年10月24日 11:41/ 0 赞/ 182 阅读

相关 js 天数倒计时时间倒计时

export function getOverTimeDown(endDateStr: string, outValue?: { value: string }, fn

àì夳堔傛蜴生んèń/ 2022年09月11日 12:10/ 0 赞/ 227 阅读

相关 js倒计时

//倒计时 function show_time() { //正数表达式 var re = /^\d+(?=\.{0,1}

我就是我/ 2022年08月05日 07:49/ 0 赞/ 170 阅读

相关 JS-实现秒表倒计时+缓存倒计时

实现秒表倒计时+缓存倒计时功能 <!DOCTYPE html> <html> <head> <meta ch

约定不等于承诺〃/ 2022年05月17日 12:38/ 0 赞/ 316 阅读

相关 js制作简易倒计时

一.首先介绍用到date的api new Date()：获取当前时间 getTime()：获取距离1970年的毫秒数 getFullYear()：获取年份 ge

待我称王封你为后i/ 2022年03月28日 15:01/ 0 赞/ 218 阅读

相关 js倒计时

倒计时 { padding: 0; margin: 0; box

亦凉/ 2022年01月30日 02:19/ 0 赞/ 209 阅读

相关 js倒计时

　　　　　　　　　　　　　　var startTime = Date.parse(new Date())/1000;//开始时间

太过爱你忘了你带给我的痛/ 2021年10月23日 10:55/ 0 赞/ 373 阅读

相关 js倒计时

![20190820151447888.png][] function tow(n) { return n >= 0 &&

- 日理万妓/ 2021年10月19日 09:52/ 0 赞/ 384 阅读

相关 JS 倒计时

经常遇到需要倒计时的地方，下面的JS可以简单实现倒计时，当然可以加上Css使得界面更加美观！ `<script type=` `"text/javascript"` `>`

约定不等于承诺〃/ 2021年09月29日 17:34/ 0 赞/ 493 阅读