js 实现简单的红绿灯

Roger-006

已于 2022-07-20 15:54:35 修改

阅读量1w

点赞数 9

分类专栏： ES6 html5 js 文章标签： js

于 2019-07-31 14:07:34 首次发布

本文链接：https://blog.csdn.net/AJINGJINGJJ/article/details/97913350

版权

ES6 同时被 3 个专栏收录

5 篇文章 1 订阅

订阅专栏

html5

4 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title></title>
    <style>
    .cont {
        padding: 5px;
        border-radius: 4px;
        border: 1px solid pink;
        display: inline-block;
        background: rgb(220, 220, 220);
    }
    .light {/**通用红绿灯样式*/
        width: 30px;
        height: 30px;
        border-radius: 50%;/**制造圆形，正圆*/
        transition: all .4s ease-in-out;/**设置过渡动画，css3.当状态有变化时，400ms将变化逐渐过渡。因为后边只有透明度有变化，所以在这里设置all 或者 opacity 都是可以的*/
        display: inline-block;/**行内块儿元素，为了三个灯在一行内。也可以不设置。那就是三个灯竖排。元素排列在这个例子中不是重点，不做赘述*/
        margin: 0 2px;/**元素横向外间距*/
    }

    .green {
        background: green;/**背景色设置绿色，标记绿灯*/
    }

    .yellow {
        background: yellow;/**背景色设置黄色，标记黄灯*/
    }

    .red {
        background: red;/**背景色设置红色，标记红灯*/
    }

    .off {
        opacity: 0.3;/**30%的透明度，表现灯处于灭的状态。不设置这个值的时候，默认是1.0（不透明）*/
    }
    </style>
</head>

<body>
    <div class="cont">
        <div class="light green">
        <!--绿灯-->
        </div>
        <div class="light yellow off">
        <!--黄灯-->
        </div>
        <div class="light red off">
        <!--红灯-->
        </div>
    </div>
</body>
<script>
//红绿灯类名，随便写的
class LightFn {
    async run() {
        // this.light('green');
        // await this.sleep(3000);
        // this.light('yellow');
        // await this.sleep(1000);
        // this.light('red');
        // await this.sleep(2000);
        // this.run();
        while (true) {//while(真值)无限循环，表示红绿灯是一直循环亮起的
            this.light('green');//亮绿灯
            await this.sleep(3000);//持续等待3000毫秒，也就是3秒钟
            this.light('yellow');//亮黄灯
            await this.sleep(1000);//持续等待1000毫秒，也就是1秒钟
            this.light('red');//亮红灯
            await this.sleep(2000);//持续等待2000毫秒，也就是两秒钟
        }
    }
    //亮灯方法
    light(val) {//传入参数亮起那一盏灯
        ['green', 'yellow', 'red'].forEach(item => {
            if (val == item) {//循环判断所有的灯颜色，如果和传入颜色值相等，那么就亮这盏灯
                document.querySelector('.' + item).classList.toggle('off', false);//更换成了toggle方法
            } else {//循环判断所有的灯颜色，如果和传入颜色值不相等，那么把这盏灯灭掉
                document.querySelector('.' + item).classList.toggle('off', true);//更换成了toggle方法
            }
        })
    }

    //es6语法，等待传入时长的一个方法
    //duration 传递传入的等待时间
    sleep(duration) {
        return new Promise(resolve => {
            setTimeout(resolve, duration)//宏任务列表添加事件，当事件队列执行到并等待duration时间后，执行resolve方法，promise结束
        })
    }
}
let a = new LightFn();//创建一个红绿灯实例
a.run();//开始按内部写的时间定时闪烁红绿灯
</script>
</html>

Roger-006

关注

9
点赞
踩
17

收藏

觉得还不错? 一键收藏
5
评论
js 实现简单的红绿灯

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> &l...
复制链接

扫一扫

专栏目录