JS:红绿灯

最新推荐文章于 2024-01-04 21:09:30 发布

Cathy _Mmm

最新推荐文章于 2024-01-04 21:09:30 发布

阅读量586

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46535360/article/details/108799030

版权

JavaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

此问题有多种写法，此处用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>