首页流水灯代码，前端代码实现

流水灯代码，前端代码实现

时间: 2023-07-03 14:03:50 浏览: 57

以下是一个简单的流水灯前端代码实现： HTML： ```html <!DOCTYPE html> <html> <head> <title>流水灯</title> <style> #container { display: flex; justify-content: center; align-items: center; height: 100vh; } .led { width: 30px; height: 30px; background-color: gray; margin-right: 10px; border-radius: 50%; } .active { background-color: red; } </style> </head> <body> <div id="container"></div> <script src="app.js"></script> </body> </html> ``` JavaScript： ```javascript const container = document.getElementById('container'); const ledCount = 8; const delay = 500; for (let i = 0; i < ledCount; i++) { const led = document.createElement('div'); led.classList.add('led'); container.appendChild(led); } let activeIndex = 0; setInterval(() => { const leds = document.querySelectorAll('.led'); leds[activeIndex].classList.remove('active'); activeIndex = (activeIndex + 1) % ledCount; leds[activeIndex].classList.add('active'); }, delay); ``` 这段代码使用了 `setInterval` 函数来实现流水灯的效果。它每隔一定的时间就会将当前亮着的 LED 灯的样式设置为未选中的样式，然后将下一个 LED 灯的样式设置为选中的样式。在这个例子中，我们使用了 CSS 中的 `.active` 类来表示选中的样式。

阅读全文