demo-红绿灯

最新推荐文章于 2022-08-10 16:06:57 发布

咩有猫腻.

最新推荐文章于 2022-08-10 16:06:57 发布

阅读量306

点赞数 1

分类专栏：前端后端demo demo

本文链接：https://blog.csdn.net/DcTbnk/article/details/106556621

版权

前端后端demo 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

demo

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        #light {
            width: 260px;
            display: flex;
            justify-content: space-evenly;
        }

        #light li {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            opacity: .1;
        }

        #light #green {
            background: green;
        }

        #light #yellow {
            background: yellow;
        }

        #light #red {
            background: red;
        }

        .green #green,
        .yellow #yellow,
        .red #red {
            opacity: 1;
        }
    </style>
</head>

<body>
    <!-- html -->
    <ul id="light" class="">
        <li id="green"></li>
        <li id="yellow"></li>
        <li id="red"></li>
    </ul>

    <!-- js -->
    <script>
        //绿灯 3s  黄灯1s  红灯3s
        let oLight = document.getElementById("light");

        //方法1******************
        function start(){
            oLight.className="green";
            setTimeout(function(){
                oLight.className="yellow";
                setTimeout(()=>{
                    oLight.className="red";
                    setTimeout(()=>{             
                            start();
                    },3000)
                },1000)
            },3000);
        }
        start();

        //方法2*****************
        function timeout(interval) {
            return new Promise((resolve, reject)=>{
                setTimeout(resolve, interval);
            });
        }

        function start() {
            oLight.className = "green";
            timeout(3000).then(() => {
                oLight.className = "yellow";
                return timeout(1000);
            }).then(() => {
                oLight.className = "red";
                return timeout(3000);
            }).then(() => {
                start();
            })

        }
        start();
    </script>
</body>

咩有猫腻.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
demo-红绿灯

<style> * { margin: 0; padding: 0; } ul, li { list-style: none; } #light { width: 260px; display: flex; justify-content: space-.
复制链接

扫一扫