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

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

时间: 2024-11-13 11:22:21 浏览: 3

为了实现这个功能，我们可以使用JavaScript编写一个简单的定时器（setInterval），配合HTML结构和CSS样式。下面是一个简化的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .light { display: inline-block; width: 50px; height: 50px; margin: 10px; text-align: center; font-size: 30px; color: white; background-color: gray; } </style> </head> <body> <div class="light" id="redLight">红灯</div> <div class="light" id="yellowLight">黄灯</div> <div class="light" id="greenLight">绿灯</div> <script> let intervalId; function changeLights(colorIndex) { const lights = document.querySelectorAll('.light'); lights.forEach((light, index) => { if (index === colorIndex) { light.textContent = '倒计时'; light.style.backgroundColor = colorIndex == 0 ? 'red' : (colorIndex == 1 ? 'yellow' : 'green'); } else { light.textContent = ''; light.style.backgroundColor = 'gray'; } }); } function startTimer() { clearInterval(intervalId); intervalId = setInterval(() => { changeLights(0); // 红灯 setTimeout(() => { changeLights(1); // 黄灯 setTimeout(() => { changeLights(2); // 绿灯 setTimeout(startTimer, 2000); // 每次循环间隔2秒 }, 2000); }, 2000); }, 2000); } startTimer(); // 开始倒计时 </script> </body> </html> ``` 在这个示例中，我们首先创建了三个`<div>`元素代表红绿灯，然后定义了一个JavaScript函数`changeLights`来切换颜色和文本。`startTimer`函数初始化并启动定时器，每两秒执行一次，按照红、黄、绿的顺序切换。

阅读全文