首页javascript红绿灯代码

javascript红绿灯代码

时间: 2024-06-02 13:06:18 浏览: 271

JavaScript实现红绿灯的代码可以分为以下几步： 1. 首先定义一个变量来表示当前是红灯还是绿灯，可以使用布尔类型。 2. 定义一个定时器来控制红绿灯的变化，可以使用setInterval函数。 3. 在定时器内部，根据当前的状态来改变红绿灯的颜色，可以通过修改HTML元素的class属性来实现。 4. 在定时器内部，还需要更新当前状态，可以使用逻辑运算符或三目运算符来实现。下面是一个简单的JavaScript红绿灯代码示例： ``` <html> <head> <style> .red { background-color: red; } .yellow { background-color: yellow; } .green { background-color: green; } </style> </head> <body> <div id="traffic-light"> <div class="light red"></div> <div class="light yellow"></div> <div class="light green"></div> </div> <script> var isGreen = false; setInterval(function() { var lights = document.querySelectorAll('.light'); if (isGreen) { lights.classList.add('yellow'); lights.classList.remove('yellow'); } else { lights.classList.remove('yellow'); lights.classList.add('yellow'); } isGreen = !isGreen; }, 3000); </script> </body> </html> ```

阅读全文