用JavaScript 语言实现红绿灯效果。 功能要求描述如下: (1) 绿灯从 10 秒开始倒计时,倒计时颜色绿色,为当倒计时为 0时,绿灯熄灭,黄灯亮起:黄灯倒计时 3秒,倒计时颜色为黄色,当倒计时为 0时,红灯亮起: 红灯倒计时也为 10 秒,倒计时颜色为红色,当倒计时为0时,绿灯亮起如此循环往复。 (2) 红灯绿灯亮灯时长均为 30 秒,黄灯亮灯时长为 3 秒。 (3) 实现效果要求有红绿黄三色灯,有倒计时屏幕。 29
时间: 2024-03-25 16:37:09 浏览: 19
好的,这里是用 JavaScript 实现红绿灯效果的代码,包括倒计时和颜色变化:
HTML 代码:
```
<div class="traffic-light">
<div class="bulb red"></div>
<div class="bulb yellow"></div>
<div class="bulb green"></div>
</div>
<div class="timer">10</div>
```
CSS 代码:
```
.traffic-light {
width: 100px;
height: 200px;
background-color: black;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.bulb {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 20px;
}
.red {
background-color: red;
box-shadow: 0 0 20px red;
}
.yellow {
background-color: yellow;
box-shadow: 0 0 20px yellow;
}
.green {
background-color: green;
box-shadow: 0 0 20px green;
}
.timer {
font-size: 50px;
text-align: center;
margin-top: 20px;
}
```
JavaScript 代码:
```
var timer = document.querySelector(".timer");
var bulbs = document.querySelectorAll(".bulb");
var redBulb = bulbs[0];
var yellowBulb = bulbs[1];
var greenBulb = bulbs[2];
var redTime = 10;
var greenTime = 30;
var yellowTime = 3;
function startTimer() {
if (greenTime > 0) {
greenTime--;
timer.textContent = greenTime;
redBulb.classList.remove("active");
yellowBulb.classList.remove("active");
greenBulb.classList.add("active");
timer.style.color = "green";
} else if (yellowTime > 0) {
yellowTime--;
timer.textContent = yellowTime;
redBulb.classList.remove("active");
greenBulb.classList.remove("active");
yellowBulb.classList.add("active");
timer.style.color = "yellow";
} else if (redTime > 0) {
redTime--;
timer.textContent = redTime;
greenBulb.classList.remove("active");
yellowBulb.classList.remove("active");
redBulb.classList.add("active");
timer.style.color = "red";
} else {
redTime = 10;
greenTime = 30;
yellowTime = 3;
}
}
setInterval(startTimer, 1000);
```
解释:
首先,我们用 `querySelector` 和 `querySelectorAll` 获取 HTML 中的元素,分别是计时器和三个灯泡。接着,我们定义了红灯、绿灯和黄灯的时间。在 `startTimer` 函数中,我们检查当前是哪个灯亮着,然后根据不同的情况来进行倒计时和颜色变化。最后,我们通过 `setInterval` 函数来定时调用 `startTimer` 函数,实现倒计时和循环效果。
希望这个代码对你有帮助!
相关推荐
![](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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)