首页html中用js实现红、绿、黄三个灯，倒计时结束后变为蓝色，给我展示一下代码

html中用js实现红、绿、黄三个灯，倒计时结束后变为蓝色，给我展示一下代码

时间: 2024-11-13 13:41:50 浏览: 5

js自定义设置日期时间倒计时代码.zip

实现效果： js自定义设置日期时间倒计时代码,通过使用原生js实现人时间日期的倒计时效果，一般在商城中用的比较多，例如搞某某活动，实现大促销活动，然后一个炫酷的倒计时效果，php中文网推荐下载！

HTML 和 JavaScript 结合可以很方便地创建动态效果。这里是一个简单的例子，展示了如何用 JavaScript 实现红、绿、黄、蓝四个灯泡的倒计时切换： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Color Lights</title> <style> .light { width: 50px; height: 50px; border-radius: 50%; display: inline-block; } </style> </head> <body> <div id="redLight" class="light"></div> <div id="greenLight" class="light"></div> <div id="yellowLight" class="light"></div> <div id="blueLight" style="background-color: blue; display: none;"></div> <script> // 倒计时时间 (这里是秒) const countdown = 5; let currentColorIndex = 0; function changeColor() { if (currentColorIndex === 3) { // 如果到达最后一个灯 document.getElementById("blueLight").style.display = "block"; return; } let lightElement = document.getElementById(`light_${currentColorIndex}`); lightElement.style.backgroundColor = `rgb(${currentColorIndex * 255}, ${currentColorIndex * 255}, 0)`; // 减少1并延时切换颜色 currentColorIndex++; setTimeout(changeColor, 1000); } // 开始倒计时 changeColor(); </script> </body> </html> ``` 在这个示例中，我们首先定义了四个灯泡元素，并通过 CSS 设置初始样式。然后用 JavaScript 编写了一个 `changeColor` 函数，它会依次改变每个灯的颜色，从红色到绿色，黄色，最后显示蓝色。当倒计时结束（这里是5秒）后，蓝色灯亮起。

阅读全文