用js写交通灯倒计时思路
时间: 2023-10-28 15:04:34 浏览: 57
好的,以下是用 JavaScript 实现交通灯倒计时的思路:
1. 首先,我们需要在 HTML 中创建三个 div 元素,分别代表红灯、黄灯、绿灯。
2. 在 CSS 中,为这三个 div 元素分别设置样式,使它们呈现出交通灯的形态。
3. 在 JavaScript 中,我们需要定义三个变量来分别表示红灯、黄灯和绿灯的倒计时时间(以秒为单位),例如:
```
let redTime = 10;
let yellowTime = 3;
let greenTime = 15;
```
4. 接着,我们需要编写一个函数来控制交通灯的变化。该函数首先应该将红灯的 div 元素显示出来,同时将黄灯和绿灯的 div 元素隐藏起来。然后,等待 redTime 秒后,将红灯的 div 元素隐藏起来,将黄灯的 div 元素显示出来,并等待 yellowTime 秒后,将黄灯的 div 元素隐藏起来,将绿灯的 div 元素显示出来,并等待 greenTime 秒后,循环执行此操作。
5. 最后,我们需要调用该函数来启动交通灯的倒计时。可以使用 setInterval 函数来每隔一秒钟执行一次该函数,例如:
```
setInterval(changeLight, 1000);
```
完整代码示例如下:
HTML:
```
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
```
CSS:
```
#red {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
display: none;
}
#yellow {
width: 50px;
height: 50px;
background-color: yellow;
border-radius: 50%;
display: none;
}
#green {
width: 50px;
height: 50px;
background-color: green;
border-radius: 50%;
display: none;
}
```
JavaScript:
```
let redTime = 10;
let yellowTime = 3;
let greenTime = 15;
function changeLight() {
document.getElementById("red").style.display = "block";
document.getElementById("yellow").style.display = "none";
document.getElementById("green").style.display = "none";
setTimeout(function() {
document.getElementById("red").style.display = "none";
document.getElementById("yellow").style.display = "block";
document.getElementById("green").style.display = "none";
setTimeout(function() {
document.getElementById("red").style.display = "none";
document.getElementById("yellow").style.display = "none";
document.getElementById("green").style.display = "block";
setTimeout(function() {
changeLight();
}, greenTime * 1000);
}, yellowTime * 1000);
}, redTime * 1000);
}
setInterval(changeLight, 1000);
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)