第4课：做一个实用小工具

🎯 从这节课开始，我们要做一个真正有用的东西——帮你学习的番茄钟！

⏱️ 预计用时：50 分钟

学习目标

学完这节课，你将会：

• 理解什么是变量和状态，程序是怎么"记住"东西的
• 学会渐进式开发——先做最简单的版本，再一步步变好
• 用 Claude Code 做出一个能用的番茄钟学习计时器
• 体验从"能用"到"好用"的迭代过程

概念时间：程序是怎么"记住"东西的？

变量 = 贴了标签的盒子

想象你有一排盒子，每个盒子上都贴着标签：

• 📦 标签写着"剩余时间"的盒子 → 里面放着数字 25
• 📦 标签写着"是否暂停"的盒子 → 里面放着 是 或 否
• 📦 标签写着"完成次数"的盒子 → 里面放着数字 0

这些盒子在编程里就叫做变量。程序通过变量来记住各种信息。

比如：

剩余时间 = 25    ← 盒子里放了25
是否暂停 = 否    ← 盒子里放了"否"
完成次数 = 0     ← 盒子里放了0

当你点击"开始"按钮，程序就会去翻"是否暂停"这个盒子，把里面的"是"换成"否"。每过一秒，程序就去"剩余时间"这个盒子里，把数字减掉1。

状态 = 程序此时此刻的"情况"

把所有盒子里的内容加在一起，就是程序当前的状态——就像比赛的计分板一样。

比如你的番茄钟现在的状态可能是：

• 剩余时间：18分30秒
• 模式：学习中
• 已完成：2个番茄
• 是否暂停：否

这就是程序此刻的"全貌"。每一秒，状态都在变化，就像计分板上的数字一直在跳动。

小贴士

理解变量和状态不需要死记硬背！做完今天的项目，你自然就懂了。编程概念是"用着用着就明白"的，不是"背了才会"的。

核心方法：渐进式开发

今天我们要学一个超重要的方法——渐进式开发（也叫迭代开发）。

这个方法的核心思想是：

先做出最简单能用的版本（MVP），再一步一步加功能、变好看。

为什么要这样做？

1. 不会被吓到 —— 一次只想一小步，不会觉得"好难啊做不了"
2. 每一步都能看到成果 —— 每改一次都能看到变化，超有成就感
3. 容易发现问题 —— 一次只加一点东西，出了问题马上知道是哪里的

就像画画：先画轮廓 → 再加细节 → 最后上色。没有人一笔就画出完美的画对吧？

注意

这个方法不只是初学者用的哦！全世界最厉害的程序员、最大的科技公司，都是用这个方法做产品的。微信刚出来的时候也很简陋，是一步步变成现在这样的。

动手时间：做一个番茄钟！

好啦，概念讲够了，我们开始做东西！

什么是番茄钟？

番茄钟是一种学习方法：

• ⏱️ 专注学习 25分钟
• ☕ 休息 5分钟
• 🔁 重复这个循环

我们要做一个网页版的番茄钟，有倒计时、开始/暂停/重置按钮，还有好看的界面！

第一步：做出最简单的倒计时

我们先不管好不好看，先让它能倒计时就行。

魔法咒语

帮我创建一个最简单的番茄钟网页。要求：
1. 页面中间显示倒计时，格式是 25:00
2. 一个"开始"按钮，点击后开始倒计时，每秒减1
3. 倒计时到 00:00 时停止
4. 用一个HTML文件实现，包含CSS和JavaScript
5. 先不用管好不好看，能用就行

请把文件保存为 pomodoro.html

Claude Code 会帮你创建一个基础版本。打开看看，是不是有一个数字在倒数了？

虽然很简陋，但它能用了！这就是我们的 MVP（最简单能用的版本）。

小贴士

试试用浏览器打开这个文件看看效果。你可以先把时间改成 0:10（10秒）来测试，不然等25分钟太久了！可以让 Claude Code 帮你改。

第二步：加上暂停和重置

光能开始不够，我们还需要能暂停和重置。

魔法咒语

给番茄钟加上暂停和重置功能：
1. "开始"按钮点击后变成"暂停"按钮
2. 点"暂停"后倒计时停住，按钮变回"开始"
3. 加一个"重置"按钮，点击后时间恢复到25:00
4. 请修改现有的 pomodoro.html 文件

现在你的番茄钟可以暂停、继续、重置了！试试看每个按钮是不是都能正常工作。

第三步：加上学习/休息切换

番茄钟的精髓是学习和休息交替进行。

魔法咒语

给番茄钟加上学习和休息模式的切换：
1. 25分钟倒计时结束后，自动切换到5分钟休息模式
2. 休息结束后，自动切换回25分钟学习模式
3. 页面上显示当前是"学习时间"还是"休息时间"
4. 学习时间和休息时间用不同的颜色区分（比如学习用红色系，休息用绿色系）
5. 切换时发出提示（可以用浏览器的通知或者改变页面标题）

第四步：让它变好看

功能都有了，现在让它变漂亮！

魔法咒语

请美化番茄钟的界面设计：
1. 使用现代简约风格，圆角卡片设计
2. 倒计时数字要大而清晰，用好看的字体
3. 加一个圆形进度条，随着时间减少而变化
4. 按钮要有悬停效果和点击效果
5. 背景用柔和的渐变色
6. 学习模式用温暖的色调（橙红色系），休息模式用清凉的色调（蓝绿色系）
7. 加上平滑的过渡动画
8. 在页面底部显示"今日已完成 X 个番茄"的计数

第五步：加上声音提醒（锦上添花）

魔法咒语

给番茄钟加上声音提醒功能：
1. 倒计时结束时播放一个提示音
2. 可以用 Web Audio API 生成简单的提示音（不需要音频文件）
3. 加一个开关按钮可以关闭/开启声音
4. 最后1分钟时，每10秒响一下轻微的提示音

小贴士

看到了吗？我们用了5步，从一个"只会倒数的数字"变成了一个"漂亮好用的番茄钟"。每一步都不难，但最终的结果很厉害！这就是渐进式开发的威力。

回顾一下渐进式开发的过程

让我们回头看看我们走过的路：

步骤	做了什么	效果
第1步	最基础的倒计时	能用了（MVP）
第2步	暂停和重置	基本功能完整了
第3步	学习/休息切换	核心功能完成了
第4步	美化界面	好看了
第5步	声音提醒	更好用了

每一步都是在上一步的基础上"长"出来的。就像搭积木，一块一块往上加。

想了解更多？

为什么先做功能，后做美化？

很多初学者（包括一些专业程序员！）都会犯一个错误：一开始就花很多时间在外观上。但如果功能还没做好就开始美化，万一功能要大改，那美化的工作就白费了。

专业的做法是：先让它能用，再让它好用，最后让它好看。

这三个阶段有个英文说法：

1. Make it work（让它能用）
2. Make it right（让它好用）
3. Make it pretty（让它好看）

备选项目：英语单词卡片

如果你对番茄钟不太感兴趣，也可以试试做一个英语单词卡片应用！

魔法咒语

帮我做一个英语单词卡片学习工具，用一个HTML文件实现：
1. 卡片正面显示英语单词，点击翻转显示中文意思
2. 预设20个初中常用英语单词
3. 有"认识"和"不认识"两个按钮
4. 不认识的单词会重复出现
5. 显示学习进度（已学 X / 共 X 个）
6. 界面要可爱一点，适合学生用
7. 卡片翻转要有动画效果

这个项目同样用到了变量和状态的概念——程序需要记住哪些单词你认识、哪些不认识、现在显示到第几个了。

小测验

来检验一下这节课学到了多少吧！

1. 在番茄钟程序中，变量「剩余时间」的作用是什么？

2. 什么是「状态（State）」？

3. 渐进式开发的正确顺序是什么？

4. 为什么要先做「最简单的版本（MVP）」？

---

今日挑战

你的番茄钟已经很棒了！但是，你能让它更好吗？

挑战：给番茄钟加上一个你自己想要的功能。

这里给你一些灵感：

• 🏆 番茄统计：记录今天完成了多少个番茄，显示历史记录
• 📝 任务标签：每个番茄可以写上"正在做什么"，比如"写数学作业"
• 🎨 主题切换：加几套不同的配色方案，可以切换
• ⏰ 自定义时间：让用户自己设置学习时长和休息时长
• 💬 鼓励语：每完成一个番茄，显示一句随机的鼓励话语

选一个你最想要的功能，用你学到的方法——告诉 Claude Code 你想加什么，让它帮你实现！

魔法咒语

给番茄钟加上[你想要的功能]：
[用自己的话描述这个功能应该怎么工作]
[描述你期望看到的效果]

小贴士

选功能的时候，选你自己真正想用的！当你做的东西是自己真正需要的，编程就变得特别有动力。而且，这个番茄钟以后真的可以用来帮你学习哦！

本课小结

今天你学到了好多重要的东西：

• 变量就像贴了标签的盒子，程序用它来记住信息
• 状态就是所有变量此时此刻的值，像一块实时更新的记分板
• 渐进式开发是做项目最聪明的方法：先做最简版本，一步步加功能
• 你做出了一个真正能用的番茄钟！这不是玩具，这是一个实用工具

下节课，我们要做更有趣的东西——游戏！准备好了吗？

参考示例

想看看完成后的效果？下载示例代码：点击下载

用浏览器打开就能看到效果。记住，这只是参考——你自己的作品可以完全不一样！