web前端小项目实例

我上周花了三个晚上，用纯JavaScript写了一个番茄钟。实例没有框架，项目没有构建工具，实例就是项目一个HTML文件加一个CSS文件和一个JS文件。做完之后我盯着屏幕上跳动的实例数字发愣——原来一个能用的东西，真的项目可以只靠浏览器原生能力拼出来。

这个番茄钟的实例核心逻辑简单得近乎粗暴：setInterval每秒递减一次剩余时间，到零就播放一段蜂鸣声。项目界面部分我用了一个圆环进度条，实例通过stroke-dasharray和stroke-dashoffset控制圆环的项目显示长度。第一次调通的实例时候，圆环像蜗牛爬行一样缓慢收缩，项目那种感觉比用任何动画库都踏实。实例

说实话，最折腾人的不是计时逻辑，而是那个“暂停/继续”按钮。用户可能在任何时刻点击，包括在倒计时已经归零之后。我一开始用布尔变量记录状态，结果连续快速点击三次按钮，状态就乱了。最后换成状态机：idle、running、paused、finished四种状态，每次点击都先判断当前状态再决定下一步动作。改完之后，代码量多了20行，但逻辑清晰到可以闭着眼写。

另一个让我意外的点是浏览器的标签页节流。当番茄钟在后台运行时，Chrome会把setInterval降到每秒一次甚至更低，导致计时偏差。我试过用Date.now()记录时间戳来计算差值，但那样代码复杂度又上去了。最后折中方案是：每次tick时用performance.now()校准一次，误差控制在200毫秒内。对于番茄钟来说完全够用——没人会拿它去发射火箭。

这类小项目的魅力在于，它逼你直面真实问题。你没法用“等会儿再优化”来糊弄，因为代码就摆在那里，不解决就永远卡住。我花了整整一个晚上去查AudioContext的兼容性写法，最后发现用new Audio('data:audio/wav;base64,...')反而更省事——一段40KB的蜂鸣声base64字符串，直接塞进HTML里，连外部文件都省了。

做完之后我复盘了一下：整个项目大约400行代码，其中CSS占了150行，HTML结构只有30行。真正的逻辑部分才220行左右。这个比例很能说明问题——现代前端大量时间花在样式和布局上，核心业务逻辑往往并不复杂。但恰恰是那些看起来“不复杂”的逻辑，如果没经过仔细设计，最容易在边界条件下崩溃。

我建议你也挑一个小东西做做，别碰待办事项列表——那个做烂了。试试做一个“随机颜色生成器”加“色板收藏”功能，或者做一个“键盘练习器”统计每分钟击键次数。项目越小，你越能看清自己思考的漏洞。我保证，当你看到自己写的东西在浏览器里正常跑起来时，那种满足感比刷一小时短视频强得多。

最后提一句，别用任何框架。就原生HTML/CSS/JS，顶多用一点ES6语法。框架解决的问题是团队协作和大型应用维护，对小项目来说，它们是负担，不是助力。你会发现自己对DOM操作的理解，会比用过一年React的人都深。