第六章：动手做项目
做一个倒计时工具
进阶约 12 分钟实践 · 项目
做一个倒计时工具
这个项目帮你理解时间和定时器的概念。
核心功能
告诉 AI 你需要：
- 用户设定一个目标日期和时间
- 实时显示距离目标还有多少天、小时、分钟、秒
- 倒计时到达后显示提示文字
- 好看的卡片式布局
推荐的 Prompt
帮我做一个倒计时网页，要求：
- 用户可以输入目标日期和时间
- 实时显示剩余的天、小时、分钟、秒（每秒更新）
- 四个数字卡片分别显示天/时/分/秒
- 到达目标时间后显示"时间到！"并有动画效果
- 预设几个常用倒计时（比如元旦、春节）
- 现代简洁设计，大数字显示
学到的技能
- 日期和时间的处理
- setInterval 定时器
- 实时界面更新
- CSS 动画效果
进阶挑战
- 添加多个倒计时同时显示
- 倒计时结束播放提示音
- 添加进度条显示百分比
- 可以给每个倒计时命名
常见误区
"倒计时不准怎么办？"——浏览器中的倒计时可能有 1-2 秒的误差，这是正常的。如果需要精确到毫秒级别的计时，需要更复杂的技术，入门阶段不需要纠结。
要点总结
- setInterval 用于定时更新
- 日期计算注意时区和格式
- 定时器用完记得清理
Prompt Playground
Prompt Playground
例如："帮我做一个番茄钟"