php模拟红绿灯,JS 中使用Promise 实现红绿灯实例代码(demo)
本文通过实例代码给大家介绍了JS 中使用Promise 实现红绿灯效果,在文中给大家介绍了一个promise用法例子,不了解js中如何使用Promise的朋友可以参考下本篇文章
要求使用promise 实现红绿灯颜色的跳转
绿灯执行三秒后
黄灯执行四秒后
红灯执行五秒
html 实现如下:
定义一个空类,之后再js中操作对应的类名即可实现相关的效果。
CSS实现如下: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;}
promise函数为一个异步操作函数,在函数运行结束时可以使用then()方法。我们再在promise函数内部设置延迟执行即可实现。
js 代码如下:function timeout(timer){
return function(){
return new Promise(function(resolve,reject){
setTimeout(resolve,timer)
})
}
}
var green = timeout(3000);
var yellow = timeout(4000);
var red = timeout(5000);
var traffic = document.getElementById("traffic");
(function restart(){
'use strict' //严格模式
console.log("绿灯"+new Date().getSeconds()) //绿灯执行三秒
traffic.className = 'green';
green()
.then(function(){
console.log("黄灯"+new Date().getSeconds()) //黄灯执行四秒
traffic.className = 'yellow';
return yellow();
})
.then(function(){
console.log("红灯"+new Date().getSeconds()) //红灯执行五秒
traffic.className = 'red';
return red();
}).then(function(){
restart()
})
})();
ps:下面看一个Promise用法例子
注意:要想then方法能链式的执行下去,必须返回Promise对象!!!'use strict';
function async(value) {
return new Promise(function(resolve, reject) {
var ms = Math.round(Math.random() * 1000);
setTimeout(function() {
console.log('waiting ' + ms + 'ms');
// 等待ms毫秒
resolve(value + ms);
}, ms);
});
}
// 每次执行随机等待n毫秒,结果统计总毫秒数
async(0)
.then(async)
.then(async)
.then(async)
.then(async)
.then(function(value) {
console.log('------total wait:' + value + 'ms');
});
function async1(value) {
return new Promise(function(resolve, reject) {
resolve(value + 1);
});
}
function async2(value) {
// return new Promise(function(resolve, reject) {
// resolve(value + 2);
// });
// 等价与上面写法
return Promise.resolve(value + 2);
}
function async3(value) {
return new Promise(function(resolve, reject) {
resolve(value + 3);
});
}
async1(100).then(async2).then(async3).then(function(value) {
console.log('------' + value);
});
/
function say() {
var value = 'what';
return Promise.resolve(value);
}
say().then(function(value) {
value = value + ' are';
return Promise.resolve(value);
}).then(function(value) {
value = value + ' you';
return Promise.resolve(value);
}).then(function(value) {
value = value + ' doing';
return Promise.resolve(value);
//return Promise.reject('error, exit'); // 中途退出
}).then(function(value) {
value = value + ' now!';
return Promise.resolve(value);
}).then(function(value) {
console.log('------' + value);
}).catch(function(error) {
console.log('------' + error);
});
Ball move
.ball {
width: 40px;
height: 40px;
border-radius: 20px;
margin-left: 10px;
}
.ball1 {
background: #ff0000;
}
.ball2 {
background: #00ff00;
}
.ball3 {
background: #0000ff;
}
function moving(ball, pos) {
return new Promise(function(resolve, reject) {
var marginLeft = parseInt(ball.css('margin-left'));
if (marginLeft != pos) {
var timerId = setInterval(function() {
marginLeft = marginLeft + 1;
ball.css('margin-left', marginLeft);
if (marginLeft == pos) {
clearInterval(timerId);
resolve();
}
}, 20);
} else {
resolve();
}
});
}
moving($('.ball1'), 100).then(function() {
return moving($('.ball2'), 150);
}).then(function() {
return moving($('.ball3'), 200);
});
以上所述是小编给大家介绍的JS 中使用Promise 实现红绿灯实例代码(demo),希望对大家有所帮助!!
相关推荐:
php模拟红绿灯,JS 中使用Promise 实现红绿灯实例代码(demo)相关推荐
- php模拟红绿灯,JS 中使用Promise 实现红绿灯详解
本文通过实例代码给大家介绍了JS 中使用Promise 实现红绿灯效果,在文中给大家介绍了一个promise用法例子,需要的朋友可以参考下,希望能帮助到大家. 要求使用promise 实现红绿灯颜色的 ...
- html 存储登录状态,Vue中保存用户登录状态实例代码
首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的. 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个 ...
- Java写js的Ajax代码_用JS写的一个Ajax库(实例代码)
myajax是一个用js编写的一个跨浏览器的ajax库,支持get, post, jsonp请求,精巧,简单. 一.发送GET请求: myajax.get({ data: {}, //参数 url: ...
- html实现两个箭头向左向右,原生JS实现左右箭头选择日期实例代码
原生JS实现左右箭头选择日期实例代码 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现左右箭头选择日期实例代码,编程之家小编觉得 ...
- 批量插入数据库语句java_java相关:MyBatis批量插入数据到Oracle数据库中的两种方式(实例代码)...
java相关:MyBatis批量插入数据到Oracle数据库中的两种方式(实例代码) 发布于 2020-7-22| 复制链接 本文通过实例代码给大家分享了MyBatis批量插入数据到Oracle数据库 ...
- ViSP中识别AprilTag的C++实例代码解释
VISP中识别AprilTag的C++实例代码解释 接着上一篇: VISP中识别AprilTag的C++实例代码与运行结果 先展示代码,一句一句解释吧 #include <visp3/detec ...
- ViSP中识别AprilTag的C++实例代码与运行结果
VISP中识别AprilTag的C++可运行代码与运行结果 Introduction ***具体解释见下一篇:***VISP中识别AprilTag的C++实例代码解释 ***具体帮助开发文档下载:** ...
- java get null_java 获取对象中为null的字段实例代码
下面一段简单的代码给大家分享java 获取对象中为null的字段,具体代码如下所述: private static String[] getNullPropertyNames(Object sourc ...
- android 方形按钮代码,Android中实现图文并茂的按钮实例代码
效果图如下所示: 代码: android:orientation="horizontal" android:layout_width="match_parent" ...
最新文章
- java简单通讯录的实现02person类_Java自定义类加载器实现不同版本的类加载
- c 语言26个小写字母,26个字母表大小写
- java 最少使用(lru)置换算法_一篇文章学会如何基于LRU-K算法设计本地缓存实现流量削峰...
- 最近看了两本低代码的书
- 路由器启用SNMP服务
- 斯坦福大学CS143编译原理课程笔记:4. Cool语言概述
- asp.net.mvc 中form表单提交控制器的2种方法和控制器接收页面提交数据的4种方法...
- 电路方案分析(一)智能手机FM发射器原理图及方案分析
- 扒站工具Teleport Pro教程
- 软件工程项目经理必备能力
- 码力十足学量化|如何获取指数成分股及权重数据
- 探访IBM企业级区块链-CSDN公开课-专题视频课程
- i3 9350KF和i5 9400F的区别
- 网站地图Sitemap怎么制作
- 通过ping命令获取各大网站的IP地址
- Makefile编译忽略warning或者将warning视为error
- bigwig归一化方式详解
- 玄学:那些年我为之疯狂的超能力(有音频版)
- 百度大脑EasyDL多人标注重磅上线啦
- RSA加密和解密流程