promise实现红绿灯

最新推荐文章于 2024-03-19 01:20:22 发布
最新推荐文章于 2024-03-19 01:20:22 发布
阅读量180 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42644893/article/details/115374079
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bubble{
            width: 150px;
            height: 80px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 0 auto;
        }
        .light{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            opacity: 0.3;
        }
        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
        .green{
            background-color: green;
        }
        .active{
            opacity: 1;
        }
        .colbox {
            width: 150px;
            height: 200px;
            background-color: gray;
            margin: 0 auto;
        }
        .rowbox {
            width: 500px;
            height: 120px;
            background-color: gray;
        }
        .north,.south{
            width: 580px;
        }
        .middle{
            display: flex;
        }
    </style>
</head>
<body>
   <div class="container">
    <div class="north">
        <div class="bubble bubble-north">
            <div class="light red"></div>
            <div class="light yellow"></div>
            <div class="light green"></div>
        </div>
        <div class="colbox"></div>
    </div>
    <div class="middle">
        <div class="west">
            <div class="light green"></div>
            <div class="light yellow"></div>
            <div class="light red"></div>

        </div>
        <div class="rowbox"></div>
        <div class="east">
            <div class="light red"></div>
            <div class="light yellow"></div>
            <div class="light green"></div>
        </div>
    </div>
    <div class="south">
        <div class="colbox"></div>
        <div class="bubble bubble-south">
            <div class="light green"></div>
            <div id="yellow" class="light yellow"></div>
            <div class="light red"></div>
        </div>
    </div> 
   </div>
</body>
<script>
    var northLightList = document.querySelectorAll('.bubble-north div');
    var southLightList = document.querySelectorAll('.bubble-south div');
    var westLightList = document.querySelectorAll('.west div');
    var eastLightList = document.querySelectorAll('.east div');

    first();
    second();
    function first() {  
        twinkle(westLightList).then(() => {
            return twinkle(southLightList);
        }).then(() => {
            first();
        })
        
    }
    function second() {  
        twinkle(eastLightList).then(() => {
            return twinkle(northLightList);
        }).then(() => {
            second();
        })
        
    }


    function twinkle(arr) {
        return new Promise((resolve, reject) => {
            arr[0].className = 'light green active'
            setTimeout(() => {
                arr[0].className = 'light green';

                var timer = setInterval(() => {
                        if(hasClass(arr[1], 'active')){
                            arr[1].className = 'light yellow';
                        }else{
                            arr[1].className = 'light yellow active';
                        }
                    }, 200);

                setTimeout(() => {
                    clearInterval(timer);
                    arr[1].className = 'light yellow';
                    resolve()
                    arr[2].className = 'light red active';
                    
                        setTimeout(function(){
                            arr[2].className = 'light red ';
                            
                        }, 2000)
                   
                }, 1000)
            }, 2000);
        })
        
        
    }
	//判断class属性中是否含有某个属性值
    function hasClass(element, cls) {
        return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
    }
</script>
</html>

<script>
    var northLightList = document.querySelectorAll('.bubble-north div');
    var southLightList = document.querySelectorAll('.bubble-south div');
    var westLightList = document.querySelectorAll('.west div');
    var eastLightList = document.querySelectorAll('.east div');

    first();

    function first() {
        twinkle(southLightList).then(() => {
            return twinkle(westLightList)
        }).then(() => {
            first();
        })
    }
    function twinkle(arr){
        return new Promise((resolve, reject) => {
            highLight({
            info: function(){
                arr[2].className = 'light red'
                arr[0].className = 'light green active'
            },
            time: 2,
            end: function(){
                highLight({
                    info:function() {
                        arr[0].className = 'light green'
                        arr[1].className = 'light yellow active'
                    },
                    time: 1,
                    end: function() {
                        highLight({
                            info: function(){
                                arr[1].className = 'light yellow'
                                resolve();
                                arr[2].className = 'light red active'
                            },
                            time: 3,
                            end: function(){
                            
                            }
                        })
                    }
                })
            }
        
        })
        })
        
    }
        
    
    //封装一个灯
    function highLight(config){
        let interval = null;
        let time = config.time;
        config.info();
        interval = setInterval(() => {
            time--;
            if(time === 0){
                clearInterval(interval);
                config.end();
            }
        }, 1000);
    }
</script>

在这里插入图片描述

樊小烦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 中使用Promise 实现红绿灯实例代码(demo)
12-29
要求 使用promise 实现红绿灯颜色的跳转 绿灯执行三秒后 黄灯执行四秒后 红灯执行五秒 html 实现如下： <ul id=traffic xss=removed> <li id=green></li> <li id=yellow></li> <li id=red></li> </ul> 定义一个空类，之后再js中操作对应的类名即可实现相关的效果。 CSS实现如下： ul { position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; transform: tr
promise 实现红绿灯
weixin_34162629的博客
05-12 656
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
Promise红绿灯
天空影
10-26 561
一个promise红绿灯的例子，有助于自己简单了解promise的运行机制
Promise实现一个红绿灯
Ja_ho的博客
04-18 2335
Promise在ES6中是一个比较常见的东西，它不仅可以用来处理多个接口相互依赖请求，解决地狱回调的问题，还能在很多场景中进行应用，今天我们就以一个Promise实现红绿的的实例来作为对Promise异步作用的学习，同时配合async awiat的使用进行实现 需求分析 首先我们分析以下红绿灯的实现过程需要哪些东西，第一是三个红绿黄三个颜色的灯，然后每个灯之间会进行切换，比如绿灯5s亮然后黄灯亮2s，最后是红灯3s，一个流程过后则是进行一个循环，重新到绿灯亮。 三种颜色进行亮灯 定时时间 循环切换 首先
js使用promise实现红绿灯.html
03-17
js使用promise实现红绿灯.html
Jquery promise实现一张一张加载图片
10-23
通过jquery promise实现一张一张的连续图片的加载功能，当图片加载错误，超时后会显示加载图片加载失败。对jquery promise实现加载图片的相关资料感兴趣的朋友参考下
promise:Python 中的超高性能 Promise 实现
05-30
承诺这是 Python 中 Promise 的一个实现。 它是 Promises/A+ 的超级集，旨在拥有可读、高性能的代码，并仅提供在 Python 中使用 Promise 绝对必要的扩展。 它与完全兼容安装 $ pip install promise用法下面的示例...
php模拟红绿灯,JS 中使用Promise 实现红绿灯实例代码(demo)
weixin_30998797的博客
03-09 210
本文通过实例代码给大家介绍了JS 中使用Promise 实现红绿灯效果，在文中给大家介绍了一个promise用法例子,不了解js中如何使用Promise的朋友可以参考下本篇文章要求使用promise 实现红绿灯颜色的跳转绿灯执行三秒后黄灯执行四秒后红灯执行五秒html 实现如下：定义一个空类，之后再js中操作对应的类名即可实现相关的效果。CSS实现如下：ul {position: absolute...
promise实现超级棒的红绿灯（我不要你觉得）
weixin_42369566的博客
12-01 373
今天学promise，事件轮询…叫苦不迭，这理解起来着实是需要费好大一番劲儿啊~~~ 不过呢，在我的不懈努力之下，终于参破了promise一点点点的知识，赶紧做个实例练习，记录下来！ 依然是思路写在注释上，上代码！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>red-green-yellow</title> </head
JS Promise实现红绿灯显示
甘乐2333的博客
06-19 780
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
实现红绿灯(Promise)
aoliaoliaoli的博客
09-27 470
promise+async+await
promise红绿灯
zhang_huana的博客
06-05 317
下面这是一个用promise写的小案例 红绿灯 当成功时调用resolve(); 使用promise的then方法 接收结果 Title function redFunc(){ $("#redLight").style.background=“orangered”; let...
【手写系列】使用Promise实现红绿灯交替重复亮
pakerder的博客
10-31 372
红灯3秒亮一次，黄灯2秒亮一次，绿灯1秒亮一次；如何让三个灯不断交替重复亮灯？（用Promise实现）
利用promise写红绿灯
weixin_38545763的博客
07-24 1745
promise是什么？ Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。 红绿灯的效果就是使用promise的原型的then方法，再加上闭包 红绿灯的效果是： 红灯3秒，黄灯1秒，绿灯2秒 1、首先是html代码 <div id="bigbox"> <div clas...
Promise实现红绿灯
蒙悦纳的博客
06-20 670
生活中常见的红绿灯利用js实现 主要是利用的promise的异步来实现功能那个。 function change(div){ return new Promise(function(resolve,reject){ setTimeout(function(){ resolve(div); },1000) }) } 利用promise来实现延迟操作 修改每个灯的颜色： function changeColor(div,color){ divs.forEach(item=>{
【面试刷题 】使用Promise实现红绿灯交替重复亮
最新发布
羊羊羊羊羊羊羊的博客
03-19 570
红灯3秒亮一次，绿灯2秒亮一次，黄灯1秒亮一次；如何让三个灯不断交替重复亮灯？要求：用Promise实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值