<!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. Centos 安装 kubectl kubelet kubeadm

    cat <<EOF > /etc/yum.repos.d/kubernetes.repo [kubernetes] name=Kubernetes baseurl=https://m ...

  2. 执行nvidia-smi出错

    执行nvidia-smi出错 NVIDIA-SMI has failed because it couldn't communicate with the NVIDIA driver. Make su ...

  3. Beta冲刺——星期四

    这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 团队名称 飞猪们 这个作业的目标 剩余任务预估,分配任务(开发,测试等).按要求提交当天冲刺报告. ...

  4. netty-3.客户端与服务端通信

    (原) 第三篇,客户端与服务端通信 以下例子逻辑: 如果客户端连上服务端,服务端控制台就显示,XXX个客户端地址连接上线. 第一个客户端连接成功后,客户端控制台不显示信息,再有其它客户端再连接上线,则 ...

  5. fullpage.js最后一屏不满一屏时，滚动方式

    这两天公司网页改版用到fullpage.js这个滚屏插件,页面内容整屏的滚动,不成问题,各种设置在网上也都有文档.而我遇到的问题就是,页面内容不满屏的时候,和上面的内容放一块就太挤,单独放一屏就太空, ...

  6. 【每日一包0011】pad

    [github地址:https://github.com/ABCDdouyae...] pad 给字符串的左右加padding,也可以用于删减字符串两端 用法:pad(str, length, opt ...

  7. 强大的Visual Studio插件CodeRush全新发布v19.2，助力VS开发

    CodeRush是一个强大的Visual Studio .NET 插件,它利用整合技术,通过促进开发者和团队效率来提升开发者体验.CodeRush能帮助你以极高的效率创建和维护源代码.Consume- ...

  8. Pandas中DataFrame数据合并、连接（concat、merge、join）之merge

    二.merge:通过键拼接列 类似于关系型数据库的连接方式,可以根据一个或多个键将不同的DatFrame连接起来. 该函数的典型应用场景是,针对同一个主键存在两张不同字段的表,根据主键整合到一张表里面 ...

  9. 2019CCPC秦皇岛赛区（重现赛）- J

    链接: http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1010&cid=872 题意: 鉴纯夏是一名成绩不太好的高中生. ...

  10. .Net中手动实现AOP

    序言 资料 https://www.cnblogs.com/farb/p/AopImplementationTypes.html