js -制作红绿灯倒计时

最新推荐文章于 2023-12-06 15:54:35 发布

清欢灬

最新推荐文章于 2023-12-06 15:54:35 发布

阅读量4.2k

点赞数 7

分类专栏： JS 文章标签： css html

本文链接：https://blog.csdn.net/a754334599/article/details/112393002

版权

JS 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

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>

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

清欢灬

关注

7
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
js -制作红绿灯倒计时

1、html内容：<body> <div class="box">  <div id="red"></div>  <div id="yellow"></div>  <div id="green"></div&
复制链接

扫一扫