js红绿灯倒计时代码
时间: 2023-09-15 07:24:23 浏览: 120
以下是一个简单的红绿灯倒计时的 JavaScript 代码示例:
HTML 代码:
```html
<div id="traffic-light">
<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>
</div>
```
CSS 代码:
```css
.light {
border-radius: 50%;
width: 50px;
height: 50px;
margin: 10px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
```
JavaScript 代码:
```javascript
const redLight = document.querySelector('.red');
const yellowLight = document.querySelector('.yellow');
const greenLight = document.querySelector('.green');
function switchLight() {
setTimeout(() => {
// 切换到黄灯
redLight.style.opacity = 0.2;
yellowLight.style.opacity = 1;
greenLight.style.opacity = 0.2;
setTimeout(() => {
// 切换到绿灯
redLight.style.opacity = 0.2;
yellowLight.style.opacity = 0.2;
greenLight.style.opacity = 1;
setTimeout(() => {
// 切换到红灯
redLight.style.opacity = 1;
yellowLight.style.opacity = 0.2;
greenLight.style.opacity = 0.2;
switchLight();
}, 5000); // 绿灯持续时间为 5 秒
}, 2000); // 黄灯持续时间为 2 秒
}, 5000); // 红灯持续时间为 5 秒
}
switchLight(); // 开始循环切换红绿灯
```
这个代码将循环切换红绿灯,每个灯持续的时间可以在代码中调整。