<!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-UA-Compatible" content="ie=edge">

  <title>红绿灯</title>

</head>

<style>

ul {

    position: absolute;

    width: 200px;

    height: 200px;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

}

  /*画3个圆代表红绿灯*/

  ul >li {

      width: 40px;

      height: 40px;

      border-radius:50%;

      opacity: 0.2;

      display: inline-block;

  }

  /*执行时改变透明度*/

  ul.red >#red,

  ul.green >#green,

  ul.yellow >#yellow{

      opacity: 1.0;

  }

  /*红绿灯的三个颜色*/

  #red {background: red;}

  #yellow {background: yellow;}

  #green {background: green;}

</style>

<body>

  <ul id="main" class="">

    <li id="green"></li>

    <li id="yellow"></li>

    <li id="red"></li>

  </ul>

</body>

<script>

  function timeOut(timer){

      return function(){

          return new Promise(function(resolve,reject){

            setTimeout(resolve,timer)

          })

        }

      }

    var green = timeOut(5000);

    var yellow = timeOut(2000);

    var red = timeOut(3000);

    var main = document.getElementById("main");

    (function restart(){

      'use strict'                     //严格模式

      console.log("绿灯"+new Date().getSeconds())  //绿灯执行5秒

      main.className = 'green';

      green()

      .then(function(){

          console.log("黄灯"+new Date().getSeconds())  //黄灯执行2秒

          main.className = 'yellow';

          return yellow();

        })

      .then(function(){

          console.log("红灯"+new Date().getSeconds())   //红灯执行3秒

          main.className = 'red';

          return red();

        }).then(function(){

          restart()

        })

      })();

</script>

</html>

promise 实现红绿灯的更多相关文章

  1. 使用Promise实现红绿灯交替重复亮

    红灯3秒亮一次,黄灯2秒亮一次,绿灯1秒亮一次:如何让三个灯不断交替重复亮灯?(用Promise实现) function red() { console.log('red'); } function ...

  2. 用promise和async/await分别实现红绿灯

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JS进阶 | 解决JQ keyup事件延迟的问题

    写在前面 在使用keyup事件时,存在一个问题,假如想要做出类似于表单验证的demo:表单输入账号 “xxx” 后  再去ajax异步去后台数据库匹配,但是keyup事件的原理是每次键盘事件弹起就会检 ...

  4. 面试 | 商汤科技面试经历之Promise红绿灯的实现

    说在前面 说实话,刚开始在听到这个面试题的实话,我是诧异的,红绿灯?这不是单片机.FPGA.F28335.PLC的实验吗?! 而且还要用Promise去写,当时我确实没思路,只好硬着头皮去写,下来再r ...

  5. 红绿灯 promise和原始方式实现

    Promise 方式 async+await function sleep(duration){ return new Promise(function(resolve){ setTimeout(re ...

  6. [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)

    关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下pro ...

  7. 理解ES6——Promise

    浏览器的控制台真是个好东西,啥都能干: 这就是Promise,能看出来啥? 1.是个构造函数,可以new实例. 2.自身有一些方法:all.race.reject.resolve... 3.原型上有c ...

  8. promise的理解

    为什么会有promise,他的作用是什么? promise主要是为了解决js中多个异步回调难以维护和控制的问题. 什么是promise? 从图中,我们可以看出,Promise是一个函数,这个函数上有在 ...

  9. Javascript - Promise学习笔记

    最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下.   一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编 ...

随机推荐

  1. 腾讯数据安全专家谈联邦学习开源项目FATE：通往隐私保护理想未来的桥梁

    数据孤岛.数据隐私以及数据安全,是目前人工智能和云计算在大规模产业化应用过程中绕不开的“三座大山”. “联邦学习”作为新一代的人工智能算法,能在数据不出本地的情况下,实现共同建模,提升AI模型的效果, ...

  2. C#学习之Timothy Liu

    原文出自 本文摘录了一些值得学习的地方. 1.对一个程序来说,静态指编辑期.编译期,动态指运行期. 静态时装在硬盘里,动态时装在内存里. 2.反射示例 通过反射获得类的属性和方法. static vo ...

  3. 通过jenkins api远程调用job

    curl http://jenkins地址/job/job_name/config.xml --user username:token

  4. JQUERY动态绘制表格，实现动态添加一行，删除一行

    HTML部分 <table style="width: 100%;" id="TABYESTERDAY11"></table> < ...

  5. 个人签发https证书

    环境: jdk1.8 window7 cmder 1.生成证书库jks keytool.exe -genkeypair -alias www.bingco.com -keyalg RSA ^ -key ...

  6. 学习shell(二)

    条件分支:  (条件表达式的中括号里面 空格不可以省略) = ] then echo '2 = 2'; else echo '2 != 2'; fi # 上面的代码不使用缩进, 并不会出错, 但不应该 ...

  7. jquery image选择器 语法

    jquery image选择器 语法 作用::image 选择器选取类型为 image 的 <input> 元素.无锡大理石测量平台 语法:$(":image") jq ...

  8. .Net面向对象（OOP）

    序言 virtual虚方法 virtual 关键字用于在基类中修饰方法.virtual的使用会有两种情况: 情况1:在基类中定义了virtual方法,但在派生类中没有重写该虚方法.那么在对派生类实例的 ...

  9. vue 运行脚手架报错

    报错: You are using the runtime-only build of Vue where the template compiler is not available. Either ...

  10. hdu 5773 最长递增子序列 （nlogn）+贪心

    The All-purpose Zero Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...