<!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. Networker软件安装

  2. View相关面试问题-ListView缓存面试问题讲解

    什么是ListView: ListView就是一个能数据集合以动态滚动的方式显示在用户界面上的View. ListView适配器模式: 有了Adapter可以将数据源与view进行分离~ ListVi ...

  3. Codeforces 1082 毛毛虫图构造&最大权闭合子图

    A #include<bits/stdc++.h> using namespace std; typedef long long ll; , MAXM = ; //int to[MAXM ...

  4. 使用IDA Pro逆向C++程序

    使用IDA Pro逆向C++程序 附:中科院李_硕博 : IDA用来做二进制分析还是很强大的 .lib程序是不是很容易分析出源码? 这个得看编译选项是怎么设置的 如果没混淆 没太过优化 大体能恢复源码 ...

  5. 201871010104-陈园园《面向对象程序设计（java）》第十七周学习总结

    201871010104-陈园园<面向对象程序设计(java)>第十七周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  6. UnicodeDecodeError: 'utf-8' codec can't decode byte 0xd0 in position 0: invalid continuation byte

    用pandas打开csv文件可能会出现这种情况,原因可能是excel自己新建一个*.csv文件时候容易出错.进入文件另存为,然后选择csv文件即可.

  7. router-link

    <router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航. 通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签,可以通过配置 tag 属 ...

  8. js 获取两个数组的交集，并集，补集，差集

    https://blog.csdn.net/piaojiancong/article/details/98199541 ES5 const arr1 = [1,2,3,4,5], arr2 = [5, ...

  9. php+提高大文件上传速度

    PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...

  10. mysql8.0.11安装

    1.下载mysql-->下载 2.解压 3.添加my.ini配置文件 [mysqld]# 设置3306端口port=3306# 设置mysql的安装目录basedir=C:\wnmp\mysql ...