js红绿灯倒计时代码
时间: 2023-09-15 15:24:23 浏览: 74
以下是一个简单的JavaScript红绿灯倒计时代码:
```javascript
function trafficLight() {
var redLight = document.getElementById("red");
var yellowLight = document.getElementById("yellow");
var greenLight = document.getElementById("green");
// 红灯闪烁
setInterval(function() {
redLight.style.backgroundColor = "red";
setTimeout(function() {
redLight.style.backgroundColor = "black";
}, 500);
}, 1000);
// 黄灯倒计时
setTimeout(function() {
yellowLight.style.backgroundColor = "yellow";
setTimeout(function() {
yellowLight.style.backgroundColor = "black";
}, 500);
}, 7000);
// 绿灯倒计时
setTimeout(function() {
greenLight.style.backgroundColor = "green";
setTimeout(function() {
greenLight.style.backgroundColor = "black";
trafficLight();
}, 10000);
}, 7500);
}
trafficLight();
```
在HTML中,需要定义三个灯的div元素,例如:
```html
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
```
然后在CSS中,需要给这些div元素定义宽度、高度和边框颜色:
```css
div {
width: 50px;
height: 50px;
border: 2px solid black;
}
```
这个代码会让红灯闪烁,黄灯亮7秒,绿灯亮10秒,然后再次从红灯开始循环。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)