JS中使用Promise实现红绿灯实例代码(demo)
要求
龙安网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。创新互联2013年至今到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
- 使用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;}
javascript原理:
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() }) })();
Demo 请 点击这里!
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
总结
以上所述是小编给大家介绍的JS 中使用Promise 实现红绿灯实例代码(demo),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
文章题目:JS中使用Promise实现红绿灯实例代码(demo)
本文网址:http://pwwzsj.com/article/ijiedg.html