使用 JavaScript 构建交通灯系统

中级

在本项目中,你将学习如何创建一个交通灯系统,该系统会在一定时间间隔后将灯的颜色从红色变为绿色。通过此项目,你将掌握 JavaScript 的基础知识,并了解如何基于时间事件操作 DOM 以显示不同的元素。

JavaScript

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

简介

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

👀 预览

交通信号灯颜色变化

🎯 任务

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

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

🏆 成果

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

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

教师

labby

Labby

Labby is the LabEx teacher.