1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>红绿灯</title>
  8. </head>
  9. <style>
  10. ul {
  11.     position: absolute;
  12.     width: 200px;
  13.     height: 200px;
  14.     top: 50%;
  15.     left: 50%;
  16.     transform: translate(-50%,-50%);
  17. }
  18.  
  19.   /*画3个圆代表红绿灯*/
  20.  
  21.   ul >li {
  22.       width: 40px;
  23.       height: 40px;
  24.       border-radius:50%;
  25.       opacity: 0.2;
  26.       display: inline-block;
  27.   }
  28.  
  29.   /*执行时改变透明度*/
  30.  
  31.   ul.red >#red,
  32.   ul.green >#green,
  33.   ul.yellow >#yellow{
  34.       opacity: 1.0;
  35.   }
  36.  
  37.   /*红绿灯的三个颜色*/
  38.  
  39.   #red {background: red;}
  40.  
  41.   #yellow {background: yellow;}
  42.  
  43.   #green {background: green;}
  44. </style>
  45. <body>
  46.   <ul id="main" class="">
  47.     <li id="green"></li>
  48.     <li id="yellow"></li>
  49.     <li id="red"></li>
  50.   </ul>
  51. </body>
  52. <script>
  53.   function timeOut(timer){
  54.       return function(){
  55.           return new Promise(function(resolve,reject){
  56.             setTimeout(resolve,timer)
  57.           })
  58.         }
  59.       }
  60.     var green = timeOut(5000);
  61.     var yellow = timeOut(2000);
  62.     var red = timeOut(3000);
  63.     var main = document.getElementById("main");
  64.  
  65.     (function restart(){
  66.       'use strict'                     //严格模式
  67.       console.log("绿灯"+new Date().getSeconds())  //绿灯执行5秒
  68.       main.className = 'green';
  69.  
  70.       green()
  71.       .then(function(){
  72.           console.log("黄灯"+new Date().getSeconds())  //黄灯执行2秒
  73.           main.className = 'yellow';
  74.           return yellow();
  75.         })
  76.       .then(function(){
  77.           console.log("红灯"+new Date().getSeconds())   //红灯执行3秒
  78.           main.className = 'red';
  79.           return red();
  80.         }).then(function(){
  81.           restart()
  82.         })
  83.       })();
  84. </script>
  85. </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. three.js之创建一个几何体

    <html> <head> <title>My first three.js app</title> <style> body { marg ...

  2. PAT Basic 1021 个位数统计 (15 分)

    给定一个 k 位整数 1 (0, ,, d​k−1​​>0),请编写程序统计每种不同的个位数字出现的次数.例如:给定 0,则有 2 个 0,3 个 1,和 1 个 3. 输入格式: 每个输入包含 ...

  3. Windowsx下Appium环境搭建步骤及问题

    1,安装Java jdk配置环境变量  验证方式:cmd >java -version 2,下载Android sdk配置环境变量 验证方式:cmd >adb devices(下载的是zi ...

  4. 计算机基础之BIOS

    BIOS BIOS是英文"Basic Input Output System"的缩略词,直译过来后中文名称就是"基本输入输出系统".在IBM PC兼容系统上,是 ...

  5. 爱搞事情的webpack

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler). 当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency g ...

  6. ARDUINO UNO烧录BOOTLOADER

    批量烧录为了速度加快,使用USBASP工具,配合PROGISP软件进行烧录. 因为脱离了ARDUINO IDE,所以需要研究AVR单片机的熔丝位设置问题. 刷ATMEGA32U4芯片,需要这样设置: ...

  7. Acwing-202-最幸运的数字(同余, 欧拉定理)

    链接: https://www.acwing.com/problem/content/204/ 题意: 8是中国的幸运数字,如果一个数字的每一位都由8构成则该数字被称作是幸运数字. 现在给定一个正整数 ...

  8. java+大文件上传+下载

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...

  9. position:fixed 失效问题

    为了提升动画性能,在body上加上了transform:translate3d(0,0,0) 但是3d使得新建了一个层(具体原因请参考:高性能css动画),导致position:fixed不在当前的层 ...

  10. P1121 环状最大两段子段和(DP)

    P1121 环状最大两段子段和 难度 提高+/省选- 题目描述 给出一段环状序列,即认为A[1]和A[N]是相邻的,选出其中连续不重叠且非空的两段使得这两段和最大. 输入输出格式 输入格式: 输入文件 ...