<!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. 解决IDEA中springboot整合mybatis中出现的Invalid bound statement(not found)的问题【转】

    感谢原博主,原文链接 : https://blog.csdn.net/benben513624/article/details/81076182 最近学习springboot的开发,中间磕磕碰碰也是遇 ...

  2. SpringBoot使用JPA来做数据查询

    Spring-Data-JPA在做数据存储方面真的很方便,它的目的就是写更少的代码,更多的事情,但是也有其力有未逮或者说处理起来比较闹心的地方. 1.先来感受一下使用JPA做数据查询时,代码的简化程度 ...

  3. 《Python基础教程》第二章：列表和元组（2）

    list函数可以将字符串转换为列表 ' '.join(somelist)可以将列表转换为字符串 从列表中删除元素可以使用del语句来实现 方法是与对象有紧密联系的函数:对象.方法(参数) append ...

  4. Mysql 5.6主从同步配置

    主从同步,本质是利用数据库日志,将主库数据复制一份到从库,本质上是使用了数据复制技术. 本文概要 主库的基本配置 从库的基本配置 完全同步的步骤 注意事项 工作原理 1. 主库的基本配置 做两件事:启 ...

  5. mysql 查看删除触发器等操作

    mysql 查看删除触发器等操作 平时很少操作触发器,源于昨晚的一次故障,使用pt-online-change-schema修改大表过程中出现异常,再次执行时,提示已经存在触发器,导致失败. 这里推荐 ...

  6. 题解 【POI2008】KUP-Plot purchase

    题面 先把题目意思讲一下吧: 给一个 \(n*n\) 的地图,每个格子有一个价格,找一个矩形区域,使其价格总和位于\([k,2k]\). 那么首先,可以想到,如果\(a[i][j]\)(格子的价格,下 ...

  7. noi.ac #535 生成树

    题目链接:戳我 我们考虑按照编号依次加点,然后维护一个栈. 预设生成树的颜色为color. 对于当前点x,如果它和栈首的点连边颜色相同,那么他们的连边可以作为生成树上面的边,点i已经连接,直接brea ...

  8. AVPython:Python Support for ArcView

    AVPython embeds the Python programming language within ArcView GIS 3.x. This project will also encom ...

  9. pymysql pymysql.err.OperationalError 1045 Access denied最简单解决办法

    我使用的是python3.6+pymysql+mysql8.0 在cmd命令行直接输入mysql回车出现:ERROR 1045 (28000): Access denied for user 'ODB ...

  10. ERROR: virtualenvwrapper could not find virtualenv in your path

    环境: Ubuntu 18.04 Python3 使用pip3安装virtualenv和virtualenvwrapper两个包,ubuntu18.04中,用户使用pip安装的包在~/.local/下 ...