promise 实现红绿灯
<!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 实现红绿灯的更多相关文章
- 使用Promise实现红绿灯交替重复亮
红灯3秒亮一次,黄灯2秒亮一次,绿灯1秒亮一次:如何让三个灯不断交替重复亮灯?(用Promise实现) function red() { console.log('red'); } function ...
- 用promise和async/await分别实现红绿灯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS进阶 | 解决JQ keyup事件延迟的问题
写在前面 在使用keyup事件时,存在一个问题,假如想要做出类似于表单验证的demo:表单输入账号 “xxx” 后 再去ajax异步去后台数据库匹配,但是keyup事件的原理是每次键盘事件弹起就会检 ...
- 面试 | 商汤科技面试经历之Promise红绿灯的实现
说在前面 说实话,刚开始在听到这个面试题的实话,我是诧异的,红绿灯?这不是单片机.FPGA.F28335.PLC的实验吗?! 而且还要用Promise去写,当时我确实没思路,只好硬着头皮去写,下来再r ...
- 红绿灯 promise和原始方式实现
Promise 方式 async+await function sleep(duration){ return new Promise(function(resolve){ setTimeout(re ...
- [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)
关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下pro ...
- 理解ES6——Promise
浏览器的控制台真是个好东西,啥都能干: 这就是Promise,能看出来啥? 1.是个构造函数,可以new实例. 2.自身有一些方法:all.race.reject.resolve... 3.原型上有c ...
- promise的理解
为什么会有promise,他的作用是什么? promise主要是为了解决js中多个异步回调难以维护和控制的问题. 什么是promise? 从图中,我们可以看出,Promise是一个函数,这个函数上有在 ...
- Javascript - Promise学习笔记
最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下. 一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编 ...
随机推荐
- Python全部库整理
库名称简介 Chardet字符编码探测器,可以自动检测文本.网页.xml的编码. colorama主要用来给文本添加各种颜色,并且非常简单易用. Prettytable主要用于在终端或浏览器端构建格式 ...
- Python模块struct(二进制数据服务)
struct模块 Python没有专门处理字节的数据类型.但由于b'str'可以表示字节,所以,字节数组＝二进制str. 而在C语言中,我们可以很方便地用struct.union来处理字节,以及字节和 ...
- 实现一个可无限折叠的table
前言 如何在table上实现一个可折叠展开子节点的table?先看下最终实现效果图: 其实这个项目在两个月以前就以上上传在github了,但当时没有写详细的实现过程.自己前几天发表的一篇技术贴当下拉列 ...
- PHP类知识----值传递和引用传递
JS中数组是引用传递 PHP除了资源和对象等数据类型,其数据类型是值传递(即使数组也如此) 栈内存(快速内存)中存放标量数据类型,复合数据类型的变量名和数据地址 在内存中,我们可以认为内存中有很多格子 ...
- Laravel进行数据库迁移（migration）
迁移(migration) 文档的简介是:迁移就像数据库的版本控制,允许团队简单轻松的编辑并共享应用的数据库表结构,迁移通常和 Laravel 的结构构建器结对从而可以很容易地构建应用的数据库表结构. ...
- hdu 6065 RXD, tree and sequence
题 OwO http://acm.hdu.edu.cn/showproblem.php?pid=6065 (2017 Multi-University Training Contest - Team ...
- vivo 手机 video 标签无法播放视频解决方案
1. 针对 vivo 手机单独设置 video 标签加上 controls 此时video 可以点击播放,但是有进度条存在. 2. 将 video 隐藏,用一张图片定位在在 video 所在的位置,点 ...
- Neko does Maths CodeForces - 1152C 数论欧几里得
Neko does MathsCodeForces - 1152C 题目大意:给两个正整数a,b,找到一个非负整数k使得,a+k和b+k的最小公倍数最小,如果有多个k使得最小公倍数最小的话,输出最小的 ...
- Java线程之Timer
简述 java.util.Timer是一个定时器,用来调度线程在某个时间执行.在初始化Timer时,开启一个线程循环提取TaskQueue任务数组中的任务, 如果任务数组为空,线程等待直到添加任务: ...
- Python实现telnet命令测试防火墙
Python实现telnet命令测试防火墙 telnet主要用于测试主机端口是否开通 ping主要是用来测试网络是否畅通和主机是否正在使用 使用Python实现Telnet测试主机端口是否开通的功能. ...