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异步编 ...
随机推荐
- 2.2.EJB_Bean
1.EJB中的三种Bean 1．会话bean(sessionbean) 负责与客户端交互．是编写业务逻辑的地方．在会话Bean中可以通过jdbc直接操作数据厍．但大多数情况下都是通过实体bean来完 ...
- myBatis整合Spring理论
整合目标 更少的编码 更少的配置 足够的灵活性 1.更少的编码 只写接口,不写实现(myBatis帮我们实现接口) 2-1.更少的配置-别名 在java的规范当中,表示一个类型是通过包名+类名,但是整 ...
- 小程序+tgit
1.微信公众平台-设置-开发者工具 开通 腾讯云和tgit权限管理 如果遇到问题 ..用户二次验证什么的 直接去 腾讯云-安全设置 将“敏感操作”和“异地登陆” 中的保护去掉 2.微信公众平台- ...
- BZOJ2238 Mst[最小生成树+树剖+线段树]
跑一遍mst.对于非mst上的边,显然删掉不影响. 如果删边在树上,相当于这时剩下两个连通块.可以证明要重新构成mst只需要再加一条连接两个连通块的最小边,不会证,yy一下,因为原来连通块连的边权和已 ...
- Java一棵树之001线程
一.理解浓缩 线程是计算机cpu调度的最小的单位,并且jvm中的线程和机器中的线程是一一对应的,在现代编程中,很多时候为了充分利用机器资源而使用多线程,当然很多时候工作中并未使用线程,还是根据场景来选 ...
- 01_3大配置管理工具、SaltStack安装、修改minion_id
1.配置管理 1.1 puppet /'pʌpɪt/ 木偶:傀儡:受他人操纵的人 使用自有的puppet描述语言,可管理配置文件.用户.cron任务.软件包.系统服务等. 问题: 学习曲线非常陡峭 ...
- 网页分享到微信、微博、QQ空间、百度贴吧等
1.首先说明的是,pc端微信分享只能通过二维码来分享. 2.下面是js代码. //分享到新浪微博 function shareToSinaWB(event){ event.preventDefault ...
- Spring Security 解决X-Frame-Options deny
错误信息: Refused to display 'https://github.com/hwclass/awesome-sound' in a frame because it set 'X-Fra ...
- webpack-dev-server 和 html-webpack-plugin的使用
webpack-dev-server的作用:自动编译 1.webpack-dev-server的使用 1)cnpm i webpack-dev-server -D 2)在package.json中配置 ...
- poj 2376 Cleaning Shifts 贪心 区间问题
<pre name="code" class="html"> Cleaning Shifts Time Limit: 1000MS Memory ...