JS 中使用Promise 實現(xiàn)紅綠燈實例代碼(demo)
要求
- 使用promise 實現(xiàn)紅綠燈顏色的跳轉(zhuǎn)
- 綠燈執(zhí)行三秒后
- 黃燈執(zhí)行四秒后
- 紅燈執(zhí)行五秒
html 實現(xiàn)如下:
<ul id="traffic" class=""> <li id="green"></li> <li id="yellow"></li> <li id="red"></li> </ul>
定義一個空類,之后再js中操作對應(yīng)的類名即可實現(xiàn)相關(guān)的效果。
CSS實現(xiàn)如下:
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; } /*執(zhí)行時改變透明度*/ ul.red >#red, ul.green >#green, ul.yellow >#yellow{ opacity: 1.0; } /*紅綠燈的三個顏色*/ #red {background: red;} #yellow {background: yellow;} #green {background: green;}
javascript原理:
promise函數(shù)為一個異步操作函數(shù),在函數(shù)運(yùn)行結(jié)束時可以使用then()方法。我們再在promise函數(shù)內(nèi)部設(shè)置延遲執(zhí)行即可實現(xiàn)。
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' //嚴(yán)格模式 console.log("綠燈"+new Date().getSeconds()) //綠燈執(zhí)行三秒 traffic.className = 'green'; green() .then(function(){ console.log("黃燈"+new Date().getSeconds()) //黃燈執(zhí)行四秒 traffic.className = 'yellow'; return yellow(); }) .then(function(){ console.log("紅燈"+new Date().getSeconds()) //紅燈執(zhí)行五秒 traffic.className = 'red'; return red(); }).then(function(){ restart() }) })();
ps:下面看一個Promise用法例子
注意:要想then方法能鏈?zhǔn)降膱?zhí)行下去,必須返回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); }); } // 每次執(zhí)行隨機(jī)等待n毫秒,結(jié)果統(tǒng)計總毫秒數(shù) 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); }); <html> <head> <title>Ball move</title> <style type="text/css"> .ball { width: 40px; height: 40px; border-radius: 20px; margin-left: 10px; } .ball1 { background: #ff0000; } .ball2 { background: #00ff00; } .ball3 { background: #0000ff; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </head> <body> <div class="ball ball1"></div> <div class="ball ball2"></div> <div class="ball ball3"></div> <script type="text/javascript"> 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); }); </script> </body> </html>
總結(jié)
以上所述是小編給大家介紹的JS 中使用Promise 實現(xiàn)紅綠燈實例代碼(demo),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript Dom實現(xiàn)輪播圖原理和實例
這篇文章主要為大家詳細(xì)介紹了JavaScript Dom實現(xiàn)輪播圖原理和實例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-02-02Bootstrap中的表單驗證插件bootstrapValidator使用方法整理(推薦)
這篇文章主要介紹了Bootstrap中的表單驗證插件bootstrapValidator使用方法整理(推薦)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06JavaScript函數(shù)封裝隨機(jī)顏色驗證碼(完整代碼)
這篇文章主要介紹了JavaScript函數(shù)封裝隨機(jī)顏色驗證碼(完整代碼),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12微信小程序點擊圖片實現(xiàn)長按預(yù)覽、保存、識別帶參數(shù)二維碼、轉(zhuǎn)發(fā)等功能
這篇文章主要介紹了微信小程序點擊圖片實現(xiàn)長按預(yù)覽、保存、識別帶參數(shù)二維碼、轉(zhuǎn)發(fā)等功能,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07- 下面就結(jié)合我自己的體會和所學(xué)習(xí)的東東和大家一起來學(xué)習(xí)在JS中如何使用面向?qū)ο蟮木幊獭?/div> 2011-08-08
JS動態(tài)改變?yōu)g覽器標(biāo)題的方法
這篇文章主要介紹了JS動態(tài)改變?yōu)g覽器標(biāo)題的方法,涉及JavaScript頁面元素結(jié)合時間函數(shù)動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-04-04最新評論