利用JS实现一个红绿灯效果,每次红灯亮10秒,黄灯亮3秒,绿灯亮8秒,并在红绿灯右侧显示倒计时
时间: 2023-07-15 16:10:46 浏览: 163
以下是实现红绿灯效果及倒计时的JavaScript代码:
```javascript
var redLight = document.getElementById("red");
var yellowLight = document.getElementById("yellow");
var greenLight = document.getElementById("green");
var timer = document.getElementById("timer");
function red() {
redLight.style.backgroundColor = "red";
yellowLight.style.backgroundColor = "black";
greenLight.style.backgroundColor = "black";
timer.innerHTML = "10";
setTimeout(yellow, 10000);
}
function yellow() {
redLight.style.backgroundColor = "black";
yellowLight.style.backgroundColor = "yellow";
greenLight.style.backgroundColor = "black";
timer.innerHTML = "3";
setTimeout(green, 3000);
}
function green() {
redLight.style.backgroundColor = "black";
yellowLight.style.backgroundColor = "black";
greenLight.style.backgroundColor = "green";
timer.innerHTML = "8";
setTimeout(red, 8000);
}
red();
```
在 HTML 中,需要创建三个 div 元素,分别代表红灯、黄灯、绿灯,以及一个用于显示倒计时的 span 元素。例如:
```html
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
<span>倒计时:<span id="timer"></span>s</span>
```
CSS 样式可以根据需要自行定义。
在 JavaScript 中,通过 getElementById 获取到红灯、黄灯、绿灯和计时器元素,在 red 函数中设置红灯亮起并开始倒计时,并在 setTimeout 中设置在 10 秒后调用 yellow 函数。在 yellow 和 green 函数中同理,分别设置黄灯和绿灯亮起并开始倒计时,并在 setTimeout 中设置相应的等待时间后调用下一个函数。在倒计时的过程中,每次更新计时器元素的 innerHTML。最后,在程序开始时调用 red 函数即可。