此问题有多种写法,此处用JS写
1. 对于这种问题,一般情况下是要用到setInterval()方法的
2. 首先设置一下事件一般情况下红绿灯的事件都是固定的,可以自己设计,先将红绿灯一轮下来的事件算出来
3. 设计每个颜色的灯会亮多久,在这时间里对应的灯会亮,而其他灯则是黑的
4. 当时间到后,就跳转到下一个灯亮,上一个灯的颜色变黑
5. 到最后时设置的总时间会变为零,写一个判断语句,当总时间变成零时,将这个事件再次变为总时间,这样红绿灯就可以一直亮下去
代码如下:
<div class="one">
<div></div>
<div></div>
<div></div>
<div class="content"></div>
</div>
<script>
var div = document.querySelectorAll('div');
var timer = 9;
setInterval(function () {
if (timer <= 9 && timer > 6) {//绿灯
div[4].innerHTML = timer - 6;
div[3].style.backgroundColor = 'green';
div[1].style.backgroundColor = 'gainsboro';
timer--
} else if (timer <= 6 && timer > 3) {//黄灯
div[4].innerHTML = timer - 3;
div[2].style.backgroundColor = 'yellow';
if (timer == 6) {
div[3].style.backgroundColor = 'gainsboro';
}
timer--;
} else if (timer <= 3 && timer > 0) {//红灯
div[4].innerHTML = timer;
div[1].style.backgroundColor = 'red';
if (timer == 3) {
div[2].style.backgroundColor = 'gainsboro';
}
timer--;
}
if (timer == 0) {
timer = 9;
}
}, 1000);
</script>