首页使用setInterval设置三个元素实现红绿灯倒计时循环。开始时显示红灯，黄灯，绿灯文字，背景为灰色，先将红灯变为倒计时同时改变背景色为红色，依次三个灯循环改变文字为倒计时和背景

使用setInterval设置三个元素实现红绿灯倒计时循环。开始时显示红灯，黄灯，绿灯文字，背景为灰色，先将红灯变为倒计时同时改变背景色为红色，依次三个灯循环改变文字为倒计时和背景

时间: 2024-11-13 15:22:19 浏览: 3

html5利用setInterval实现新年元旦倒计时

为了使用`setInterval`实现红绿灯倒计时循环，首先需要创建HTML结构，并添加样式。这里是一个简单的例子，我们将使用JavaScript编写： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .light { display: inline-block; width: 50px; height: 50px; border-radius: 50%; margin-right: 10px; background-color: gray; color: white; } .red { background-color: red; } .yellow { background-color: yellow; } .green { background-color: green; } </style> </head> <body> <div id="lights"> <span class="light" data-text="红灯">红灯</span> <span class="light" data-text="黄灯">黄灯</span> <span class="light" data-text="绿灯">绿灯</span> </div> <script> const lights = document.querySelectorAll('#lights span'); let countdown = 3; // 倒计时初始值 function changeLight(index) { lights[index].innerText = countdown--; if (countdown <= 0) { countdown = 3; // 重置倒计时 switch (index) { case 0: lights[1].classList.add('yellow'); break; case 1: lights[2].classList.add('green'); break; case 2: lights[0].classList.add('red'); break; } } else { lights[index].classList.remove('yellow', 'green'); } } setInterval(() => { changeLight(0); }, 1000); // 每秒切换灯光状态 </script> </body> </html> ``` 在这个示例中，我们首先定义了三个带有不同颜色背景和初始文本的元素，代表红、黄、绿灯。然后，我们设置了`setInterval`函数，每秒钟会调用`changeLight`函数，该函数会更新当前颜色的倒计数并根据倒计时结果切换下一个灯的颜色。

阅读全文