promise实现超级棒的红绿灯（我不要你觉得）

最新推荐文章于 2024-07-13 17:43:47 发布

bug制造机

最新推荐文章于 2024-07-13 17:43:47 发布

阅读量373

点赞数 2

文章标签： js es6 html css3

本文链接：https://blog.csdn.net/weixin_42369566/article/details/110443448

版权

今天学promise，事件轮询…叫苦不迭，这理解起来着实是需要费好大一番劲儿啊~~~

不过呢，在我的不懈努力之下，终于参破了promise一点点点的知识，赶紧做个实例练习，记录下来！

依然是思路写在注释上，上代码！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>red-green-yellow</title>
</head>
<style>
    html, body {
        width: 100%;
        height: 100%;
    }
    .container {
        width: 200px;
        height: 50px;
        border: 1px solid black;
        border-radius: 50px;
        background-color: #ccc;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    #red, #green, #yellow {
        height: 20px;
        width: 20px;
        border-radius: 20px;
        border: 1px solid black;
        position: absolute;
    }
    #red {
        top: 50%;
        left: 30%;
        transform: translateY(-50%) translateX(-50%);
    }
    #green {
        top: 50%;
        left: 70%;
        transform: translateY(-50%) translateX(-50%);
    }
    #yellow {
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }
    .white {
        background-color: #fff;
    }
    .red {
        background-color: red;
    }

    .green {
        background-color: green;
    }

    .yellow {
        background-color: yellow;
    }
</style>
<body>
<div class="container">
    <div id="red" class="white"></div>
    <div id="yellow" class="white"></div>
    <div id="green" class="white"></div>
</div>
<script>
    //red 10s  yellow 3s  green 5s  车的 人行道 秒数反过来
    //获取元素对象  我知道id可以不用写这步直接用  但是idea报浪线就是难受！而且下面还有用呢
    let red = document.getElementById('red');
    let yellow = document.getElementById('yellow');
    let green = document.getElementById('green');
    //创建promise对象的函数
    function creatPromise() {
        // s 代表 执行几秒（比如说红灯，你准备让它亮几秒）
        // e 代表哪个灯 是红灯就传red
        // color 改变颜色是通过更换类名实现的  所以这里就是代表类名
        return function (s,e,color) {
            return new Promise((resolve,reject)=>{
                // 创建 立马让它颜色亮起
                e.className=color;
                // s秒之后执行resolve 让它灭掉
                setTimeout(resolve,s);
            })
        }
    }
    //r==>red y==>yellow g==>green
    let r =creatPromise();
    let y =creatPromise();
    let g =creatPromise();
    //红绿灯循环函数  递归实现  也可以写成沙箱，立即执行
    function r_loop() {
        //创建red的promise对象 执行亮起，then代表resolve 是setTimeout的回调 s秒之后red灭掉
        //return 创建yellow的promise对象 黄灯亮起 ... 一直继续到第二次黄灯，就该递归，再红灯...形成循环了
        r(10000,red,'red').then(()=>{
            red.className='white';
            return y(3000,yellow,'yellow');
        }).then(()=>{
            yellow.className='white';
            return g(4000,green,'green');
        }).then(()=>{
            green.className='white';
            return y(3000,yellow,'yellow');
        }).then(()=>{
            yellow.className='white';
        }).then(()=>{
            r_loop();
        })
    }
    r_loop();
    //ok  完美实现 
</script>
</body>
</html>

效果图：

在这里插入图片描述

css部分没有注释，相信大家也不是为了看css进来的，肯定对其游刃有余~

好了，今日份笔记书写完毕，下次再见，路过的可以辛苦动动手留个赞~

bug制造机

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
promise实现超级棒的红绿灯（我不要你觉得）

今天学promise，事件轮询…叫苦不迭，这理解起来着实是需要费好大一番劲儿啊~~~不过呢，在我的不懈努力之下，终于参破了promise一点点点的知识，赶紧做个实例练习，记录下来！依然是思路写在注释上，上代码！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>red-green-yellow</title></head
复制链接

扫一扫