简介
在这个项目中,你将学习如何创建一个交通信号灯系统,该系统会在一定时间间隔后将灯光颜色从红色变为绿色。这个项目将帮助你理解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