要求
龍安網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)2013年至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
html 實(shí)現(xiàn)如下：
定義一個(gè)空類(lèi)，之后再js中操作對(duì)應(yīng)的類(lèi)名即可實(shí)現(xiàn)相關(guān)的效果。
CSS實(shí)現(xiàn)如下：
重慶分公司
重慶分公司
ul {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/*畫(huà)3個(gè)圓代表紅綠燈*/
ul >li {
width: 40px;
height: 40px;
border-radius:50%;
opacity: 0.2;
display: inline-block;
}
/*執(zhí)行時(shí)改變透明度*/
ul.red >#red,
ul.green >#green,
ul.yellow >#yellow{
opacity: 1.0;
}
/*紅綠燈的三個(gè)顏色*/
#red {background: red;}
#yellow {background: yellow;}
#green {background: green;}javascript原理：
promise函數(shù)為一個(gè)異步操作函數(shù)，在函數(shù)運(yùn)行結(jié)束時(shí)可以使用then()方法。我們?cè)僭趐romise函數(shù)內(nèi)部設(shè)置延遲執(zhí)行即可實(shí)現(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()
})
})();Demo 請(qǐng) 點(diǎn)擊這里!
ps:下面看一個(gè)Promise用法例子
注意：要想then方法能鏈?zhǔn)降膱?zhí)行下去，必須返回Promise對(duì)象?。。?nbsp;
'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)計(jì)總毫秒數(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);
// });
// 等價(jià)與上面寫(xiě)法
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
總結(jié)
以上所述是小編給大家介紹的JS 中使用Promise 實(shí)現(xiàn)紅綠燈實(shí)例代碼(demo)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
