HTML5+CSS3+JS小实例：极简番茄钟专注计时器
在这个充满各种复杂框架的时代，有时候回归原生反而能让我们走得更远。番茄钟（Pomodoro）作为时间管理的神器，大家肯定都不陌生。但市面上的工具要么功能太臃肿，要么需要登录注册。
今天，我们不引入任何第三方库，仅用 HTML + CSS + JS 就能手搓一个极简、高颜值的番茄钟。它不仅支持专注与休息模式的自动切换，还自带一个超实用的“防刷新”机制——哪怕你不小心按了 F5，倒计时也会接着走！
效果展示
整个界面采用了柔和的渐变背景，专注时是温暖的粉橘色，休息时自动切换为清新的蓝色。最绝的是，当倒计时结束时，它会利用 Web Audio API 发出清脆的提示音，完全不需要引入任何外部音频文件！
源码拆解
1. HTML：极简的骨架
结构上我们只保留了最核心的元素：当前模式提示、时间显示区以及开始/重置按钮。没有多余的嵌套，干净利落。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1