<!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. Zabbix 监控Windows磁盘IO

    Windows下,打开cmd输入 typeperf -qx > c:\typeperf.txt #打开c:\typeperf.txt文件 windows性能计数器里面包含windows相关数值 ...

  2. 【两种方式】vuex 如何监听页面状态的变化

    由于 Vuex 的状态存储本来就是响应式的,从 store 实例中读取状态最简单的方法,就是在计算属性中返回某个状态. 在 B 页面引入以下代码: computed: { myValue() { re ...

  3. PHP代码执行流程

    怎么样?有点了解了么.说实话,单看这个,我本人是有点懵的,不过,不要怕.咱们来慢慢地看下. 首先,在网上找的信息说PHP代码执行的顺序是这样的,第一步是词法分析,第二步是语法分析,第三步是转化为opc ...

  4. java线程基础巩固---线程生产者消费者的综合实战结合Java8语法

    基于上一次[http://www.cnblogs.com/webor2006/p/8909558.html]学习的多个生产者与多个消费者模型,此次用另外一个案例来进一步巩固线程之间的调度处理,这里还是 ...

  5. 【u-boot】u-boot中initf_dm()函数执行流程（转）

    前部分设备模型初始化 为了便于阅读,删掉部分代码,只留关键的过程: static int initf_dm(void){    int ret;    ret = dm_init_and_scan(t ...

  6. 个人项目WordCount基础功能

    码云地址:https://gitee.com/stedylan/WordCount 1.PSP表格: PSP2.1 PSP阶段 预估耗时 (分钟) 实际耗时 (分钟) Planning 计划 10 1 ...

  7. regex正则

    1 正则表达式基本语法 两个特殊的符号^和$.他们的作用是分别指出一个字符串的开始和结束.例子如下: ^The:表示所有以”The”开始的字符串(”There”,”The cat”等): of des ...

  8. 简易MySQL存储过程

    自从那天灵感突现,搜了下MySQL存储过程的实现,我就再也不会为造测试数据这种事情烦恼了,存储过程用起来简直太方便了. DROP PROCEDURE IF EXISTS insert2pay; DEL ...

  9. Bind+DLZ构建企业智能DNS/DNS

    Bind+DLZ构建企业智能DNS   目录:一.简介二.服务规划三.安装BIND及基本环境四.配置Bind-View-DLZ-MYSQL五.添加相关记录并进行测试六.配置从DNS七.补充 一.简介: ...

  10. PHP基础教程-APACHE

    兄弟连:如何配置APACHE.首先,安装并配置PHP3 1.解开压缩包到你喜欢的目录如:C:PHP3 2.把C:php3php3.ini-inst文件改名成PHP3.INI并拷贝到C:windows ...