昨天二面，面試官讓寫一個紅綠燈，現場寫了個簡單的，今天整理了一下，把樣式加了上去。
題目要求：
實現一個交替的紅綠燈，在晚上的時候交替時間增加；
核心思想：
使用promise，在setTimeOut設定時間後換一個燈。用async await遞歸完成不停交替；
步驟1：
通過changeColor實現樣式效果，然後獲取當前時間，判斷是否爲晚上，再爲其設置交替相隔時間；
使用setTimeOut設置在interval時間後，將promise的狀態變爲fulfilled。
function light(color, num) {
return new Promise((resolve, reject) => {
changeColor(color, num);
let hour = new Date().getHours(), interval;
if (hour < 18) {
interval = 2000;
} else {
interval = 5000;
}
setTimeout(resolve, interval);
})
}
步驟2：
用async/await異步操作，await接收一個promise對象，等上一個await完成後，async/await內置執行器指針自動下移，執行下一個語句，最後三個燈都顯示過後，通過遞歸，實現不停交替的過程；
async function blink() {
await light('red', 0);
await light('orange', 1);
await light('green', 2);
await blink();
}
blink();
或者使用for循環也ok，更好看一點
async function blink() {
let lights = ['red', 'orange', 'green'];
for (const [key, item] of lights.entries()) {
await light(item, key);
}
await blink();
}
完整代碼+樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>light</title>
<style>
body {
font-size: 16px;
}
.light-top {
height: 30em;
width: 10em;
padding: 1em 2em;
border-radius: 5em;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: #383838;
}
.light-top > div {
width: 8em;
height: 8em;
border-radius: 50%;
background-color: #000000;
opacity: 0.8;
transition: all 0.3s ease-in;
}
.light {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.pole {
width: 4em;
height: 8em;
background-color: #383838;
}
.stone {
width: 14em;
height: 2.5em;
background-color: #383838;
border-radius: 1em;
}
</style>
</head>
<body>
<div class="light">
<div class="light-top">
<div></div>
<div></div>
<div></div>
</div>
<div class="pole"></div>
<div class="stone"></div>
</div>
<script>
function changeColor(color, num) {
let lightItem = document.querySelectorAll('.light-top>div');
// 將上一輪加的顏色調回來
for (let i = 0; i < lightItem.length; i++) {
lightItem[i].style.backgroundColor = 'black';
}
// 給傳入的燈設置顏色
lightItem[num].style.backgroundColor = color;
}
function light(color, num) {
return new Promise((resolve, reject) => {
changeColor(color, num);
let hour = new Date().getHours(), interval;
if (hour < 18) {
interval = 2000;
} else {
interval = 5000;
}
setTimeout(resolve, interval);
})
}
async function blink() {
let lights = ['red', 'orange', 'green'];
for (const [key, item] of lights.entries()) {
await light(item, key);
}
/*或者 await light('red', 0);
await light('orange', 1);
await light('green', 2);*/
await blink();
}
blink();
</script>
</body>
</html>
效果圖：
