js -制作红绿灯倒计时

电玩女神 2023-01-04 10:29 295阅读 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 条评论，295人围观）

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

相关阅读

相关 js倒计时(js倒计时5秒)

倒计时69天！大家倒计时多少天了？我是倒计时90天了,很享受宝宝每天胎动的时间 ![js倒计时(js倒计时5秒)\_js倒计时(js倒计时5秒)][js_js_5_j

ゞ浴缸里的玫瑰/ 2023年09月26日 14:46/ 0 赞/ 48 阅读

相关 js制作简单倒计时

效果图 ![20191125203010489.gif][] 具体思路：通过计算目标时间到目前时间的时间差，然后将时间差转化为时分秒，具体转化在代码

た入场券/ 2023年06月16日 08:29/ 0 赞/ 159 阅读

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

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

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

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

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

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

相关 js倒计时

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

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

相关 js制作简易倒计时

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

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

相关 js倒计时

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

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

相关 js倒计时

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

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

相关 js倒计时

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

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

相关 JS 倒计时

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

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