交通信号灯系统 | JavaScript DOM 操作

介绍

在这个项目中，你将学习如何创建一个交通信号灯系统，该系统会在一定时间间隔后将灯光颜色从红色变为绿色。这个项目将帮助你理解 JavaScript 的基础知识，以及如何操作 DOM 以根据基于时间的事件显示不同的元素。

👀 预览

交通信号灯颜色变化

🎯 任务

在这个项目中，你将学习：

如何设置基本的 HTML 和 JavaScript 项目结构
如何实现一个函数，在 3 秒后将交通信号灯的显示变为红色
如何实现一个函数，在 6 秒后将交通信号灯的显示变为绿色
如何使用 async/await 协调红灯和绿灯函数的执行
如何测试交通信号灯系统并确保其按预期工作

🏆 成果

完成这个项目后，你将能够：

使用 JavaScript 操作 DOM 来更改 HTML 元素的显示
使用 setTimeout() 来安排基于时间的事件
使用 async/await 管理异步操作
测试和调试你的 JavaScript 代码

设置项目结构

在这一步中，你将设置项目结构并准备必要的文件和文件夹。

打开编辑器。你应该在/home/labex/project目录中看到index.html、trafficlights.js和一些图像文件。
点击 WebIDE 右下角的Go Live按钮来运行项目。
在虚拟机顶部打开“Web 8080”并手动刷新，你将看到页面。

未完成的项目截图

实现红灯功能

在这一步中，你将实现把灯变为红色的功能。

在trafficlights.js文件中，找到red()函数。
在red函数上方设置一个变量并赋予初始值：

let trafficlightsTimer = 3000;
// 函数 red() {...}

red()函数应在 3 秒后将默认灯的显示设置为none，并将红灯的显示设置为inline-block。

function red() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      defaultlight.style.display = "none";
      redlight.style.display = "inline-block";
      resolve();
    }, trafficlightsTimer);
  });
}

实现绿灯功能

在这一步中，你将实现把灯变为绿色的功能。

在trafficlights.js文件中，找到green()函数。
green()函数应在 3 秒后（页面加载 6 秒后）将红灯的显示设置为none，并将绿灯的显示设置为inline-block。

function green() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      redlight.style.display = "none";
      greenlight.style.display = "inline-block";
      resolve();
    }, trafficlightsTimer);
  });
}

调用交通信号灯功能

在这一步中，你将调用trafficlights()函数来启动交通信号灯序列。

在trafficlights.js文件中，找到trafficlights()函数。
trafficlights()函数应使用async/await语法按顺序调用red()和green()函数。

async function trafficlights() {
  await red();
  await green();
}

trafficlights();
module.exports = { trafficlights };

测试交通信号灯

保存对trafficlights.js文件所做的更改。
在浏览器中刷新页面。你应该会看到交通信号灯从默认灯变为红色，然后在 6 秒后变为绿色。最终结果如下：