做一个倒计时页面,完整 Prompt 模板直接用

倒计时看着就是一个数字在跳,但它涉及定时器管理、状态机设计、SVG 进度环和提醒反馈,是练习前端交互逻辑的精选项目。这篇文章给你一套完整 Prompt 模板,复制就能用。

先想清楚,倒计时到底在干什么

你用过厨房计时器吧,拧到 5 分钟,它开始转,转完就响。倒计时页面干的就是这件事,只不过搬到了网页上。

从最根本的角度想,倒计时只需要回答两个问题,现在还剩多少时间?时间到了怎么通知用户?第一个问题靠定时器每秒减一来回答,第二个问题靠声音和画面变化来回答。

但如果你真的动手做,会发现一堆细节冒出来。用户点了暂停怎么办?暂停后再点开始,是从原来的位置继续还是从头来?倒计时到零的那一瞬间,定时器要不要停?如果用户在倒计时过程中修改了时间怎么办?

这些问题的答案,就藏在一个叫「状态机」的东西里。别怕名字吓人,它的意思特别简单,你的倒计时器在任何时刻都处于某一个「状态」,而用户的每个操作只会在特定状态下生效。