直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#light{
/* background:red; */
width:50px;
height:50px;
border-radius:50%;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="light"></div>
<script>
function sleep(duration) {
return new Promise(function(resolve, reject) {
setTimeout(resolve,duration);
})
}
// 接收延迟时间和颜色
async function changeLightColor(duration, color){
document.getElementById('light').style.background = color
console.log('color', color)
await sleep(duration)
}
async function act() { // 一直循环
while (true) {
await changeLightColor(3000, 'red');
await changeLightColor(2000, 'green');
await changeLightColor(1000, 'yellow');
}
}
act()
</script>
</body>
</html>