本文通过使用HTML、CSS和JavaScript实现了一个简单的红绿灯定时切换效果，详细介绍了如何利用async/await和setTimeout来控制不同颜色灯光的显示时间，形成循环的交通信号灯效果。
在极客时间大牛的重学前端的《Promise 里的代码为什么比 setTimeout 先执行？》的结尾，大牛留了一道题：
我们现在要实现一个红绿灯，把一个圆形 div 按照绿色 3 秒，黄色 1 秒，红色 2 秒循环改变背景颜色，你会怎样编写这个代码呢？复制代码我的解答如下：
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<meta name='viewport'/>
<title>Document</title>
#colorDiv {
width: 50px;
height: 50px;
border-radius: 100%;
}
</style>
</head>
<body>
<div id="colorDiv"></div>
</body>
<script>
let trafficLightDiv = document.getElementById('colorDiv')
function changeTrafficLight(duration, color) {
// 改变 div 背景颜色
trafficLightDiv.style.backgroundColor = color
// 延迟执行回调
setTimeout(resolve, duration)
})
}
async function trafficLightFun() {
await changeTrafficLight(3000, 'green')
await changeTrafficLight(1000, 'yellow')
await changeTrafficLight(2000, 'red')
await changeTrafficLight(1000, 'yellow')
trafficLightFun()
}
trafficLightFun()
</script>复制代码
扫一扫
2878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
