使用JavaScript构建交通信号灯系统

JavaScriptJavaScriptIntermediate
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

👀 预览

交通信号灯颜色变化

🎯 任务

在这个项目中,你将学习:

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

🏆 成果

完成这个项目后,你将能够:

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("`Asynchronous Programming`") javascript/AdvancedConceptsGroup -.-> javascript/error_handle("`Error Handling`") javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") subgraph Lab Skills javascript/variables -.-> lab-299857{{"`使用JavaScript构建交通信号灯系统`"}} javascript/functions -.-> lab-299857{{"`使用JavaScript构建交通信号灯系统`"}} javascript/async_prog -.-> lab-299857{{"`使用JavaScript构建交通信号灯系统`"}} javascript/error_handle -.-> lab-299857{{"`使用JavaScript构建交通信号灯系统`"}} javascript/dom_select -.-> lab-299857{{"`使用JavaScript构建交通信号灯系统`"}} javascript/dom_manip -.-> lab-299857{{"`使用JavaScript构建交通信号灯系统`"}} javascript/event_handle -.-> lab-299857{{"`使用JavaScript构建交通信号灯系统`"}} end

设置项目结构

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

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

实现红灯功能

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

  1. trafficlights.js文件中,找到red()函数。
  2. red函数上方设置一个变量并赋予初始值:
let trafficlightsTimer = 3000;
// 函数red() {...}
  1. 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);
  });
}

实现绿灯功能

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

  1. trafficlights.js文件中,找到green()函数。
  2. 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()函数来启动交通信号灯序列。

  1. trafficlights.js文件中,找到trafficlights()函数。
  2. trafficlights()函数应使用async/await语法按顺序调用red()green()函数。
async function trafficlights() {
  await red();
  await green();
}

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

测试交通信号灯

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

恭喜!你已完成变色灯项目。如果你有任何问题或需要进一步的帮助,请随时提问。

✨ 查看解决方案并练习

总结

恭喜!你已完成这个项目。你可以在LabEx中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程