用JS（3）实现交通灯系统之我记

2024-01-29 22:22:43

交通灯作为城市基础设施，在我们的生活中扮演着重要角色。今天，让我们用JavaScript来实现一个简单的交通灯系统，并在其中应用数据抽象法。

1. 定义交通灯状态

首先，我们需要定义交通灯的状态。我们将使用三种状态：红、黄和绿。这些状态可以存储在一个数组中，如下所示：

const trafficLightStates = ['red', 'yellow', 'green'];

2. 定义start方法

接下来，我们需要定义一个start方法，根据现在是第几个状态来进行切换。这个方法将使用递归的方式调用自己，不断地切换状态。

function start() {
  // 获取当前状态的索引
  const currentStateIndex = trafficLightStates.indexOf(getCurrentState());

  // 计算下一个状态的索引
  const nextStateIndex = (currentStateIndex + 1) % trafficLightStates.length;

  // 设置下一个状态
  setCurrentState(trafficLightStates[nextStateIndex]);

  // 递归调用start方法
  setTimeout(start, 1000); // 1000毫秒后执行start方法
}

3. 定义getCurrentState和setCurrentState方法

最后，我们需要定义getCurrentState和setCurrentState方法，这两个方法用于获取和设置当前状态。

function getCurrentState() {
  // 返回当前状态
  return trafficLightStates[currentStateIndex];
}

function setCurrentState(state) {
  // 设置当前状态
  currentStateIndex = trafficLightStates.indexOf(state);
}

4. 运行程序

现在，我们可以运行程序了。只需调用start方法即可。

start();

5. 完整代码

以下是如何创建初始状态，设置当前状态的示例代码：

const currentStateIndex = 0;

function getCurrentState() {
  // 返回当前状态
  return trafficLightStates[currentStateIndex];
}

function setCurrentState(state) {
  // 设置当前状态
  currentStateIndex = trafficLightStates.indexOf(state);
}

6. SEO优化

这个例子展示了如何使用数据抽象法来实现一个简单的交通灯系统。通过这种方法，我们可以轻松地切换状态，而无需担心底层实现细节。

最后，您可以使用一个简单的HTML页面来显示当前状态，如下所示：

<html>
  <head>
    
  </head>
  <body>
    <h1>当前状态：<span id="state"></span></h1>
    <script src="traffic-light-system.js"></script>
  </body>
</html>