day06今天是我这个“30天前端小项目挑战”的第6天。前5天我一直在折腾静态页面的布局、动画还有各种CSS选择器练手页面都做得挺好看但只要一涉及“点了按钮会发生什么”就卡壳。所以第6天我决定做一个真正带交互逻辑的小工具——极简番茄钟。这个项目不算大25分钟倒计时、开始暂停、重置再加上状态提示就够了但它恰好覆盖了JavaScript里最核心的几个基本功事件绑定、定时器管理、状态切换和DOM更新。如果你也处在“CSS还能写JS一碰就蒙”的阶段这篇day06的记录应该能给你一条能直接落地的上手路径尤其适合把“倒计时逻辑到底怎么跑起来”这件事彻底搞明白。1. 项目整体设计思路1.1 为什么选番茄钟而不是待办清单做练习项目第一件事不是找教程而是想清楚这个项目练的是什么。我一开始想过做待办清单但它牵涉到的知识面太散存储、增删改查、表单校验容易写着写着就跑偏。番茄钟则不一样它的核心逻辑非常清晰一个设定的时间长度到点就提醒。整个应用只有三个可见状态——运行中、已暂停、空闲待启动对应的用户操作也只有开始、暂停、重置三个动作。别小看这个“简单”越是这种边界清晰的小工具越适合把工程化的思维方式练起来。我把需求切成三块第一块是时间的计算要保证倒计时的准确性第二块是界面反馈要让用户随时知道当前处于什么阶段第三块是交互防错比如连续点击开始按钮不能重置计时、多次点击暂停不能把计时搞乱。这三块正好对应了前端开发里面最容易出问题的三个区域异步逻辑、状态管理与事件控制。做完这个番茄钟再做复杂项目时很多坑就提前踩过了。1.2 功能切片与界面草图动手写代码之前我习惯先在纸上把界面和功能过一遍不画精稿只画方块图。番茄钟的界面被我切成三块区域顶部的状态文案区显示“专注中”“已暂停”“准备开始”之类的提示中间的倒计时数字区大号数字一眼能扫到剩余时间底部的操作按钮区开始/暂停共用一个主按钮重置按钮独立放在旁边。我没有一开始就上进度环、统计图表这些花活。理由很简单第一版先把核心链路跑通把时间从25分钟减到0再谈视觉升级。如果核心逻辑没理顺就堆功能到时候排查问题会非常痛苦。界面的布局用Flexbox就能搞定一个大容器居中内部三行排列代码量不大却能把页面撑得干净整齐。2. 核心细节解析与实操要点2.1 定时器选型setInterval到底能不能用倒计时功能最自然的想法是使用setInterval每个一秒把剩余秒数减一。这个写法很简单但有个隐藏问题setInterval实际的触发间隔并不保证是1000毫秒。浏览器标签页如果切到后台定时器的回调会被降频甚至暂停手机端浏览器息屏之后更是直接冻结。如果我用“剩余秒数减一”这种方式累计时间用户把页面挂后台20分钟后切回来看到的剩余时间比实际应该剩的要多。这就是经典的时间漂移问题。解决思路有两个一个是改用Date.now()记录每一次回调时间戳每次跟上一帧的差值累加虽然不能消除后台冻结但能消除间隔不稳定带来的误差累积更省事的做法是直接存一个结束时间戳每次tick用endTime - Date.now()算出剩余毫秒数再格式化成分钟秒数。后面这个方案更稳因为它不依赖“回调执行了正确次数”这个假设而是真正基于当前系统时间去计算剩余时长。番茄钟这个场景精度要求不高我用的是第二种方案代码就是remainingMs endTime - Date.now()在setInterval里每次取到的实际剩余时间都是准的哪怕切后台回来UI也会在第一时间跳到正确值。2.2 状态机三个状态避免逻辑混乱番茄钟最容易被写崩的地方是“按钮状态混乱”。如果只用一个个if去判断“当前能不能点”代码很快就会变成一团乱麻。我这里的做法是引入一个最小状态机只有三个状态idle还没开始显示完整时长running正在倒计时paused已暂停剩余时间冻结。然后用一个currentState变量记录当前是哪个状态。每次点击主按钮先看状态再决定做什么idle时点击启动计时并进入runningrunning时点击暂停并进入pausedpaused时点击恢复计时并回到running。重置按钮则无论什么状态下都可以点击点了之后清理定时器、回到idle、回复初始时长。这个状态机的价值在于所有跟“能不能操作”有关的判断都由状态决定而不是散落在各个按钮的事件处理里。后面加新功能时只需要检查状态流转是否合理不用担心某个角落的判断漏掉。这也是我这次练的最有用的一招把交互逻辑想成状态之间的转移而不是想成条件判断的堆叠。2.3 数据驱动视图不要让DOM替你做运算另一个容易踩的坑是直接把时间显示写在DOM里然后靠读取DOM文本去计算新的时间。比如从页面里document.querySelector(.time).textContent把当前时间捞出来再减一这种写法在功能上能跑但会埋雷一旦界面上还有毫秒、还有暂停时的显示或者想换成别的显示格式整个逻辑都要跟着改。正确的做法是让数据成为唯一来源。我维护一个remainingMs变量所有计算都在这个变量上进行界面只负责把它格式化之后渲染出来。每次更新界面会调用render()函数函数内部读取remainingMs换算成mm:ss然后填充到DOM节点里。这样界面显示只是数据的投影数据对了界面一定是对的如果要加结束音效、加标题栏提醒也都可以统一在数据更新后集中处理。3. 实操过程与核心环节实现3.1 先搭HTML骨架我习惯把结构、样式、逻辑分三步走。第一步先写HTML把页面里的节点都定义清楚只关心有什么元素、它们的id和层级是什么。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title极简番茄钟 - day06/title link relstylesheet hrefstyle.css / /head body main classcontainer p idstatusText classstatus准备开始/p p idtimeDisplay classtime-display25:00/p div classbuttons button idmainBtn classbtn btn-primary开始/button button idresetBtn classbtn btn-ghost重置/button /div /main script srcscript.js/script /body /html这里有两个设计细节mainBtn的文案是动态的运行中显示“暂停”暂停中显示“继续”所以在JS里会来回改resetBtn在idle状态下其实没有操作意义但我没把它禁用因为真正点重置时如果本身就不在计时也不会产生副作用。这种“允许无意义的操作但保证操作无副作用”的取舍在实际项目里很常见目的是减少用户的理解成本。3.2 用CSS把界面撑起来第二步是CSS。我的目标是干净、直观不需要引入任何UI库原生样式就够。居中布局用Flexbox倒计时数字用大号字体状态文案用灰色弱化存在感主按钮用高饱和色突出唯一主操作。* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Segoe UI, PingFang SC, Microsoft YaHei, sans-serif; background: #f5f7fb; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .container { background: #ffffff; border-radius: 24px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); padding: 48px 40px 40px; width: 360px; text-align: center; } .status { color: #8a94a6; font-size: 14px; letter-spacing: 2px; margin-bottom: 16px; min-height: 20px; } .time-display { font-size: 72px; font-weight: 700; color: #1e2329; font-variant-numeric: tabular-nums; margin-bottom: 36px; line-height: 1; } .buttons { display: flex; justify-content: center; gap: 16px; } .btn { border: none; border-radius: 12px; padding: 12px 28px; font-size: 16px; cursor: pointer; transition: background-color 0.2s, transform 0.1s; } .btn:active { transform: scale(0.96); } .btn-primary { background: #2563eb; color: #ffffff; } .btn-primary:hover { background: #1d4ed8; } .btn-ghost { background: #eef2f7; color: #3a4454; } .btn-ghost:hover { background: #e2e8f0; }有个容易被忽略的细节是font-variant-numeric: tabular-nums。如果没有这个设置倒计时数字从10:00切到09:59时因为数字宽度不同整个时间区域会在每一秒都发生轻微抖动。开启等宽数字之后所有数字占宽一致视觉上稳定很多。这种细节虽然不起眼但对体验提升特别明显尤其是倒计时这种每秒都在变化的界面。3.3 核心JS逻辑让倒计时真正跑起来第三步是写JS。这个文件是整个项目的核心我拆成几块来写配置常量、状态变量、核心函数、事件绑定。// 配置 const WORK_MINUTES 25; const TOTAL_MS WORK_MINUTES * 60 * 1000; // 状态 let currentState idle; // idle | running | paused let remainingMs TOTAL_MS; let endTime null; let timerId null; // DOM const statusText document.getElementById(statusText); const timeDisplay document.getElementById(timeDisplay); const mainBtn document.getElementById(mainBtn); const resetBtn document.getElementById(resetBtn); // 格式化毫秒 - mm:ss function formatTime(ms) { const totalSeconds Math.max(0, Math.ceil(ms / 1000)); const minutes Math.floor(totalSeconds / 60); const seconds totalSeconds % 60; return ${String(minutes).padStart(2, 0)}:${String(seconds).padStart(2, 0)}; } // 渲染 function render() { timeDisplay.textContent formatTime(remainingMs); if (currentState idle) { statusText.textContent 准备开始; mainBtn.textContent 开始; } else if (currentState running) { statusText.textContent 专注中; mainBtn.textContent 暂停; } else { statusText.textContent 已暂停; mainBtn.textContent 继续; } } // 定时器持续回调 function tick() { remainingMs Math.max(0, endTime - Date.now()); render(); if (remainingMs 0) { finish(); } } function startTimer() { endTime Date.now() remainingMs; timerId setInterval(tick, 200); currentState running; render(); } function pauseTimer() { remainingMs Math.max(0, endTime - Date.now()); clearInterval(timerId); timerId null; currentState paused; render(); } function resetTimer() { clearInterval(timerId); timerId null; currentState idle; remainingMs TOTAL_MS; endTime null; render(); } function finish() { clearInterval(timerId); timerId null; currentState idle; remainingMs TOTAL_MS; endTime null; render(); // 到点提醒标题闪动控制台提示后续可扩展为音频播放 document.title 时间到; setTimeout(() { document.title 极简番茄钟 - day06; }, 3000); } // 事件绑定 mainBtn.addEventListener(click, () { if (currentState idle) { startTimer(); } else if (currentState running) { pauseTimer(); } else if (currentState paused) { startTimer(); } }); resetBtn.addEventListener(click, () { resetTimer(); }); // 初始渲染 render();代码里几个关键点我重点说一下timerId是setInterval返回的标识每次暂停、重置、结束时都要clearInterval否则旧的定时器会继续跑造成多个计时器叠加这正是番茄钟最常见的诡异bug来源。我在多处都调用了clearInterval核心原则就是“一个计时器只存活在当前运行的会话里”。还有一点是对剩余时间的处理在startTimer()里我用的是endTime Date.now() remainingMs也就是说暂停后恢复计时时基于暂停那一刻的剩余时间重新计算结束时间戳。这个设计让暂停和恢复变得非常干净不需要额外记录“已经流逝了多少秒”这种中间变量。3.4 把25分钟变成可配置参数我希望这个工具不只是给自己用所以把工作时间抽成了WORK_MINUTES常量。想改成50分钟只改一行配置就行想改成30秒的快速演示也一样。在真正做产品时类似的需求应该抽成用户可配置项比如在界面上加一个输入框或者滑杆但底层逻辑不用变因为计算时长的地方只认TOTAL_MS这个变量。抽配置的好处还有一点代码的可测试性变强了。调试的时候我会把WORK_MINUTES临时改成0.02也就是约1.2秒然后快速验证整个流程——开始、暂停、恢复、自然结束——每个状态切换是否正常。全流程验证通过之后再改回25分钟。这个技巧写代码时特别实用否则每次测试都要等25分钟。4. 常见问题与排查技巧实录4.1 时间漂移倒计时比真实时间慢我第一版用的就是最直接的“每秒减一”写法remainingSeconds--跑起来前两分钟不明显但20多分钟后界面上显示的时间会比实际流逝的时间慢几十秒。原因是setInterval(1000)在浏览器繁忙时不会严格每秒触发一次偶尔的几毫秒延迟会累积起来。解决方式就是前面说的不依赖“经过了几个一秒”而是直接用endTime - Date.now()倒推剩余值。我建议所有做计时器的人第一版就要用时间戳差值不要用递减计数除非你能接受误差累积。4.2 切到后台再回来计时显示“回退”这个问题看起来像是一个bug我在手机上打开页面按Home键让App切到后台过了5分钟切回来倒计时数字反而变得更大了。其实原因很简单移动端浏览器在后台会暂停setInterval等回到前台时才补一次回调。由于我的代码里remainingMs endTime - Date.now()是每次回调时重新计算所以回到前台的瞬间显示值会直接跳到正确位置不会出现“把暂停期间也算进流逝时间”的错乱。但如果用的是递减写法后台回来后会感觉时间“只走了一点点”。所以endTime - Date.now()这个方案顺便把后台冻结问题也解决了两害相权取其轻。4.3 按钮连点导致计时叠加实际测试时我快速连点了好几次主按钮结果倒计时速度明显变快。原因是每次点“开始”都会新开一个setInterval旧的那个没有清除于是多个计时器叠加数字跳得飞快。排查时我在startTimer()里增加了防御性判断在启动新定时器之前如果timerId不为null就先clearInterval(timerId)。另外事件绑定里的状态判断也能挡掉一部分误操作——因为currentState为running时点击按钮走的是pauseTimer()分支不会再调startTimer()。两者配合连点问题就根治了。5. 完成清单与后续扩展方向5.1 本地验收标准这个项目做到了什么程度算完成我给自己列了一个验收清单也在浏览器里逐项过了一遍打开页面显示25:00与“准备开始”点击“开始”状态变为“专注中”按钮文字变为“暂停”暂停后剩余时间冻结按钮文字变为“继续”继续后从暂停的剩余时间恢复倒计时重置后无论处于什么状态都回到25:00初始状态时间到后自动停回初始状态标题栏闪动提示切浏览器后台再回来时间显示仍然正确。如果这些都没问题这个项目的主流程就是稳的。剩下一件事是视觉上的打磨但功能层面已经可以收工。5.2 后续可以做哪些扩展做完核心功能之后我还想了几个保留扩展点不急着今天全做但都为后续留好了接口一是在finish()里加入音频播放和浏览器通知new Audio()和Notification API到点提醒就不再只是标题闪动了二是加一个“今日完成次数”统计用localStorage持久化正好能练到存储这块三是允许自定义工作时长和休息时长做成一个更完整的番茄工作法工具。扩展点虽然多但底层的状态机和时间计算逻辑都不需要动只需要在配置层和UI层增加能力这也是第一天写状态机时就已经留好的余量。今天的day06做到这里核心体验是写一个交互功能之前先把状态梳理清楚比急着写事件回调重要得多。我预计第7天会直接在这个番茄钟上把localStorage统计加上顺便把通知和提示音补全到时候再做一次编译打包和真机测试。如果你也在做类似的前端练习项目建议试着自己把计时逻辑写出来尤其是暂停恢复和切后台这两条路径亲手跑一遍比背十遍API定义有用。