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

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

倒计时拆开看,就 5 个部分

倒计时页面的 UI 不复杂,但背后的定时器和状态管理有不少细节。

时间输入让用户设置时、分、秒。显示屏用大字号显示剩余时间,视觉焦点所在。控制按钮包括开始、暂停、重置三个操作。进度环用 SVG 圆环可视化剩余比例,比纯数字更直观。提醒动作在倒计时归零时触发,声音加画面闪烁加文字提示三管齐下。

状态流转,一条主线加两条回退

倒计时的核心是状态机,搞清楚状态怎么跳转,Prompt 就知道怎么写。

待机设置 → 倒计时进行中 → 时间到 → 声音加画面闪烁 → 自动回到待机。这是主线。支线是进行中和已暂停之间的双向切换,点击暂停进入暂停态,点击继续回到进行中。重置可以从进行中或暂停中直接回到待机设置,是紧急退出通道。

最终效果长什么样

用下面的 Prompt 模板生成后,效果大概是这样的。

顶部是标题「专注倒计时」,中间是一个圆环进度条,圆环内显示剩余时间「25:00」,下面标注「分 / 秒」和「已过 35%」。圆环下方是时间输入框,再下面是三个按钮,开始(绿色)、暂停(蓝色)、重置(橙色)。底部显示当前状态「倒计时进行中...」。