js写一个倒计时的红绿灯

最新推荐文章于 2023-12-14 10:56:44 发布

曹俊83

最新推荐文章于 2023-12-14 10:56:44 发布

阅读量4.8k

点赞数 8

文章标签： js

本文链接：https://blog.csdn.net/ai_169/article/details/105771000

版权

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红绿灯</title>
 <link rel="stylesheet" href="./红绿灯.css">
</head>
<body>
    <!-- 创建外部容器 -->
    <div class="box">
        <!-- 三个灯 -->
        <div id="red"></div>
        <div id="green"></div>
        <div id="yellow"></div>
        <!-- 倒数计时 -->
        <div id="count" class="count">count</div>
    </div>
    <script src="./红绿灯.js"></script>
</body>
</html>

css代码：

/* 设置容器的样式 */
        .box{
            /* 设宽高 */
            width: 230px;
            height: 50px;
            /* 边框 */
            border: 2px solid #666;
            /* 圆角 */
            border-radius: 50px;
            /* 居中效果 */
            margin: 260px auto;
        }

        /* 设置里面的子块 */
        .box div{
            /* 设置子块的宽高 */
            width: 40px;
            height: 40px;
            /* 设置子块的边框 */
            /* border: 1px solid #999; */
            /* 设置子块的圆角 */
            border-radius: 50px;
            /* 浮动 */
            float: left;
            /* 设置子块的外边距 */
            margin-left: 12px;
            margin-top: 4px;
            font-size: 30px;
            font-family: 楷书;
        }
      
        
        /* 定义背景颜色,用class选择器 */
        .red{
            background-color: rgb(233, 97, 97);
        }
        .green{
            background-color: rgb(93, 226, 93);
        }
        .yellow{
            background-color:rgb(228, 228, 19);
        }
        .gray{
            background-color:rgb(95, 93, 93);
        }

js代码：

        // 设置一个灯的对象
        var lamp={
            // 红灯的属性设置
            red:{
                obj:document.getElementById("red"),
                // 红灯的时间
                timeout:10,
                // 红灯的style
                style:['red','gray','gray'],
                //红灯的下一个属性
                next:'green'
            },
            green:{
                obj:document.getElementById("green"),
                // 绿灯的时间
                timeout:10,
                // 绿灯的style
                style:['gray','green','gray'],
                //绿灯的下一个属性
                next:'yellow'
            },
            yellow:{
                obj:document.getElementById("yellow"),
                // 黄灯的时间
                timeout:2,
                // 黄灯的style
                style:['gray','gray','yellow'],
                //黄灯的下一个属性
                next:'red'
            },
            // 改变灯的颜色,改变的是class的类名
            changStyle:function(style){
                this.red.obj.className=style[0];
                this.green.obj.className=style[1];
                this.yellow.obj.className=style[2];
            }
        };

        // 声明一个倒计时的对象
        var count={
             obj:document.getElementById("count"),
             //调用方法
             change:function(num){
                 //补零，并显示到div的count块中
                 this.obj.innerHTML=(num<10)?("0"+num):num
             }
        };

        //先让绿灯亮,将灯对象赋值给now
        var now=lamp.green;
        //拿到所要运行的总时间
        var timeout=now.timeout;
        //改变样式,调用lamp对象中的changeStyle方法
        lamp.changStyle(now.style);
        //调用count.change，改变倒计时的时间
        count.change(timeout);

        // 定义一个函数，来定义时间没到0和到0的时候的样式
         function fun() {
            // 切灯
            if(--timeout<=0){
                //换下一个灯对象
                now=lamp[now.next];
                //改变灯的颜色样式
                lamp.changStyle(now.style);
                //改变总的时间
                timeout=now.timeout+1;
            }
            //倒计时，当时间没有为0，就自减
            else{
                count.change(timeout);
            }
        }
        
        // 定时器，每秒调用一次
        setInterval(fun,1000);

效果图：
在这里插入图片描述
小结：
1.创建对象来调用
2.定时器
3.用js来控制css

缺陷：
在转换时间和颜色有一秒的不同步

曹俊83

关注

8
点赞
踩
44

收藏

觉得还不错? 一键收藏
2
评论
js写一个倒计时的红绿灯

html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>红绿灯...
复制链接

扫一扫