溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
要求
html 實現如下：
<ul id="traffic" class=""> <li id="green"></li> <li id="yellow"></li> <li id="red"></li> </ul>
定義一個空類，之后再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);
});
<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>
總結
以上所述是小編給大家介紹的JS 中使用Promise 實現紅綠燈實例代碼(demo)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
