代码实现红绿灯交替切换

红绿灯交替切换：使用 JavaScript 代码模拟现实生活场景

在日常生活中，红绿灯是交通管理中不可或缺的一部分。它们通过交替切换，为车辆和行人提供有序的交通通行。为了深入了解这种常见的机制，我们可以利用 JavaScript 代码模拟红绿灯的交替切换。

理解红绿灯状态

红绿灯具有三种基本状态：红灯、绿灯和黄灯。每种状态都代表着不同的指令：

• 红灯： 停止通行
• 绿灯： 允许通行
• 黄灯： 警告即将变化，准备停车或通行

实现代码

为了在 JavaScript 中模拟红绿灯的交替切换，我们可以遵循以下步骤：

// 定义红绿灯状态
const RED_LIGHT = "red";
const GREEN_LIGHT = "green";
const YELLOW_LIGHT = "yellow";

// 定义时间间隔（毫秒）
const RED_LIGHT_DURATION = 3000;  // 3 秒
const GREEN_LIGHT_DURATION = 1000; // 1 秒
const YELLOW_LIGHT_DURATION = 2000; // 2 秒

// 获取 DOM 元素
const trafficLight = document.getElementById("traffic-light");

// 设置初始状态
let currentLight = RED_LIGHT;

// 创建定时器函数
const changeLight = () => {
  // 根据当前状态切换到下一个状态
  switch (currentLight) {
    case RED_LIGHT:
      currentLight = GREEN_LIGHT;
      trafficLight.style.background = GREEN_LIGHT;
      setTimeout(changeLight, GREEN_LIGHT_DURATION);
      break;
    case GREEN_LIGHT:
      currentLight = YELLOW_LIGHT;
      trafficLight.style.background = YELLOW_LIGHT;
      setTimeout(changeLight, YELLOW_LIGHT_DURATION);
      break;
    case YELLOW_LIGHT:
      currentLight = RED_LIGHT;
      trafficLight.style.background = RED_LIGHT;
      setTimeout(changeLight, RED_LIGHT_DURATION);
      break;
  }
};

// 启动定时器
setTimeout(changeLight, RED_LIGHT_DURATION);

代码解析

• 定义红绿黄灯的状态常量。
• 设置特定状态的持续时间。
• 获取 DOM 元素，即红绿灯的 HTML 元素。
• 设置初始状态为红灯。
• 创建一个定时器函数，它会根据当前状态切换到下一个状态并更新背景颜色。
• 启动定时器，每隔特定间隔调用定时器函数。

常见问题解答

1. 我可以自定义灯的状态和持续时间吗？
   是的，您可以根据需要修改 RED_LIGHT、GREEN_LIGHT 和 YELLOW_LIGHT 常量，以及 RED_LIGHT_DURATION、GREEN_LIGHT_DURATION 和 YELLOW_LIGHT_DURATION 变量。

2. 我可以使用 CSS 样式自定义红绿灯的外观吗？
   是的，您可以使用 CSS 规则自定义红绿灯的背景颜色、形状和大小。

3. 我可以将代码集成到我的 Web 应用程序中吗？
   当然可以。只需将代码添加到您的 HTML 文件中，并确保包括对 traffic-light 元素的引用。

4. 红绿灯的交替切换有其他实现方法吗？
   是的，您可以使用循环、setInterval() 函数或 requestAnimationFrame() 函数来实现交替切换。

5. 我可以使用不同的语言实现红绿灯的交替切换吗？
   是的，您可以在 JavaScript、Python、C++ 或任何其他支持定时器的编程语言中实现此功能。