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异步编 ...
随机推荐
- Excel种的数据类型研究【原创】【精】
因为要做一个项目,开始研究Excel种的数据类型.发现偌大的一个cnblogs竟然没人写这个,自己研究以后记录下来. 在我们通常的认识中,Excel中的数据类型有这么几种 1.常规:2.数值:3.货币 ...
- elk快速入门-在kibana中如何使用devtools操作elasticsearch
在kibana中如何使用devtools操作elasticsearch:前言: 首先需要安装elasticsearch,kibana ,下载地址 https://www.elastic.co/cn/d ...
- 网络协议相关面试问题-TLS与SSL握手
HTTPS是什么? HTTPS并不是一个单独的协议,而是对工作在一加密连接(SSL / TLS)上的常规HTTP协议.通过在TCP和HTTP之间加入TLS(Transport Layer Securi ...
- 《Python基础教程》第二章：列表和元组（1）
列表可以修改,元组则不能 字符串就是一个由字符组成的序列 使用分片操作来访问一定范围内的元素,分片操作的实现需要提供两个索引作为边界,第一个索引的元素是包含在分片内的,而第二个不包含在分片内. 如果分 ...
- 什么是DNS
DNS,或者说域名系统,通常是学习如何配置网站和服务器的一个非常困难的部分.了解 DNS 的工作原理将有助于诊断网络访问的问题,也有助于理解 DNS 系统背后的工作原理. 这篇文章中,我们会讨论一些基 ...
- 激活函数matlab代码
[转自:http://blog.csdn.net/fendoubasaonian/article/details/52974608] %JOINT Summary of this function g ...
- vue cli3 + cube-ui 配置rem踩坑记录
在install cube-ui时,选择了后编译,选中使用rem的时候会发现,怎么刷新页面的html字体被设置成了37.5px 感觉太大了,于是去寻找修改的办法,第一反应是webpack的配置,于是去 ...
- JavaScriptPlus操作类
/// <summary> /// JavaScript 操作类 /// </summary> public class JavaScriptPlus { public Jav ...
- interp2
%关于interp2的自我理解 %利用已知的信息,对数据进行拟合 %用一个例子进行理解 例:设有数据x=1,2,3,4,5,6,y=1,2,3,4,在由x,y构成的网格上,数据为:12,10,11,1 ...
- 2019牛客暑期多校训练营（第二场）A 数学
题意 eddy走一个长度为\(n\)的环,每次能往前或往后走一步,问走到\(m\)点恰好走完所有点至少一次的概率,前\(i\)个询问的答案要乘起来 分析 \(n=1,m=0\),答案为\(1\) \( ...