← 返回博客列表

我的第一个网页项目：番茄时钟

2024-12-20 · 项目复盘

这个月我完成了第一个完整的网页小项目——番茄时钟。这是一篇复盘笔记，记录我从需求到上线的全过程。

为什么做这个项目？

写代码时总是不自觉地刷手机，专注力很差。看到很多人推荐"番茄工作法"，就想：与其用别人的 App，不如自己写一个——既能练习前端，又能解决真实需求。

功能清单

1. 25 分钟专注倒计时 + 5 分钟休息；
2. 自定义番茄时长和休息时长；
3. 用 localStorage 记录每日专注次数，画简单统计条。

踩过的坑

坑 1：setInterval 不准

一开始用 setInterval 每秒减 1，结果切到其他标签页再回来，时间会偏差。后来改成记录"结束时间戳"，用 Date.now() 计算剩余时间，就准确多了。

坑 2：移动端 100vh 的问题

在手机上用 100vh 会让底部被地址栏遮住。解决办法是改用 100dvh 或 min-height: 100svh。

踩坑不可怕，可怕的是踩完不记录。写下来就是自己的经验库。

学到的经验

• 先把功能拆成最小可用的版本，再做美化；
• 状态管理比想象中重要——先想清楚数据放哪；
• 最后一步一定是：在手机真机上测一遍。

下一步计划给番茄时钟加上提醒音效和"每日目标完成"的庆祝动画，然后部署上线。