前端程序员JavaScript进阶之路：手写红绿黄灯动态切换效果（附详解）

创建动态红绿黄灯切换效果：手写 JavaScript 代码

在现代 Web 开发中，JavaScript 已经成为创建交互式和动态网页不可或缺的工具。通过 JavaScript，我们可以控制和修改网页元素的行为，从而创造出各种各样的效果，从简单的动画到复杂的游戏。在本文中，我们将探讨如何使用 JavaScript 编写一个经典的红绿黄灯动态切换效果。

如何运作？

红绿黄灯切换效果涉及三个不同颜色的灯泡——红、黄和绿——按特定顺序交替闪烁。实现这个效果的关键在于使用 JavaScript 的内置函数 setInterval() 和 setTimeout()。setInterval() 函数允许我们以指定的间隔定期执行代码，而 setTimeout() 函数允许我们在指定的时间延迟后执行代码。

代码实现

以下代码片段展示了如何使用 JavaScript 手写红绿黄灯切换效果：

const redLight = document.getElementById("red-light");
const yellowLight = document.getElementById("yellow-light");
const greenLight = document.getElementById("green-light");

function changeToRed() {
  redLight.style.backgroundColor = "red";
}

function changeToYellow() {
  yellowLight.style.backgroundColor = "yellow";
}

function changeToGreen() {
  greenLight.style.backgroundColor = "green";
}

setInterval(changeToRed, 3000);
setInterval(changeToYellow, 2000);
setInterval(changeToGreen, 1000);

在这个代码中，我们首先获取红绿黄三个灯泡的 DOM 元素。然后，我们定义了三个函数来更改每个灯泡的颜色。最后，我们使用 setInterval() 函数以 3 秒、2 秒和 1 秒的间隔调用这些函数，从而实现灯泡按特定顺序交替闪烁的效果。

总结

本教程介绍了如何使用 JavaScript 编写一个动态的红绿黄灯切换效果。我们了解了 setInterval() 和 setTimeout() 函数的用途，并展示了一个完整的代码示例来说明如何实现这个效果。希望本教程对有兴趣使用 JavaScript 创建交互式网页效果的读者有所帮助。

常见问题解答

1. 如何更改灯泡闪烁的间隔时间？

要更改灯泡闪烁的间隔时间，只需修改 setInterval() 函数中的时间参数。例如，以下代码会将红灯的闪烁间隔更改为 5 秒：

setInterval(changeToRed, 5000);

2. 如何添加额外的灯泡颜色？

要添加额外的灯泡颜色，只需创建新的 DOM 元素并为其添加相应的样式。然后，再创建一个函数来更改新灯泡的颜色，并在 setInterval() 函数中调用该函数。

3. 如何在灯泡闪烁时播放声音？

可以通过使用 HTML5 的 <audio> 元素在灯泡闪烁时播放声音。以下代码片段展示了如何实现：

<audio id="beep" src="beep.mp3"></audio>

function playBeep() {
  const audio = document.getElementById("beep");
  audio.play();
}

setInterval(playBeep, 1000);

4. 如何使灯泡闪烁的顺序随机化？

要使灯泡闪烁的顺序随机化，可以在 setInterval() 函数中使用 Math.random() 函数。以下代码片段展示了如何实现：

const lightColors = ["red", "yellow", "green"];

function changeToRandomColor() {
  const randomColor = lightColors[Math.floor(Math.random() * lightColors.length)];
  redLight.style.backgroundColor = randomColor;
}

setInterval(changeToRandomColor, 1000);

5. 如何在灯泡闪烁时显示倒计时？

可以通过使用 JavaScript 的 setInterval() 和 setTimeout() 函数在灯泡闪烁时显示倒计时。以下代码片段展示了如何实现：

const countdown = document.getElementById("countdown");

function startCountdown(seconds) {
  const interval = setInterval(() => {
    if (seconds > 0) {
      countdown.innerHTML = seconds;
      seconds--;
    } else {
      clearInterval(interval);
      countdown.innerHTML = "0";
    }
  }, 1000);
}

setInterval(() => {
  startCountdown(3);
}, 1000);