做一个倒计时工具

做一个倒计时工具

这次做一个可以自己设定目标日期的倒计时工具。与前两个项目不同，这次你会学到时间处理和定时更新。

你会学到什么

• JavaScript Date 对象（处理日期和时间）
• setInterval 定时器（让页面每秒自动更新）
• 数学计算在程序中的应用（算时间差）
• 用户输入与交互的双向绑定
• 条件判断（时间到了怎么办）

第一步：Prompt

帮我做一个倒计时网页，要求：

• 用户可以输入目标日期和时间
• 实时显示剩余的天、小时、分钟、秒（每秒更新）
• 四个数字卡片分别显示天/时/分/秒，大号字体
• 达到目标时间后显示"时间到！"并播放庆祝动画（撒花效果）
• 预设几个常用倒计时（元旦、春节、国庆）
• 深色背景 + 霓虹风格，有科技感
• 所有代码写在一个 HTML 文件中

第二步：理解"时间"在程序里怎么算

这次打开 <script> 部分，重点关注这些：

// 所有倒计时的核心：时间差 = 目标时间 - 当前时间
const target = new Date('2026-12-31');  // 目标日期
const now = new Date();                  // 当前时间
const diff = target - now;              // 相差的毫秒数

// 把毫秒换算成天/时/分/秒
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
const minutes = Math.floor((diff / (1000 * 60)) % 60);
const seconds = Math.floor((diff / 1000) % 60);

// 关键：setInterval 让代码每 1000 毫秒（1 秒）执行一次
setInterval(updateDisplay, 1000);

这段代码揭示了倒计时的本质：

1. 定义一个"目标时间点"
2. 每一秒获取一次"当前时间点"
3. 算出差值
4. 把差值拆成天、时、分、秒
5. 显示在页面上

这就是所谓的定时轮询——每隔一段时间检查一次状态。

第三步：迭代改进

• "字体不够大，天数用 80px，其他用 40px"
• "数字之间加上冒号分隔符（像 03:15:42:08 这样）"
• "每个时间单位下面加小字标签"
• "加一些闪烁的光点增加科技感"
• "背景用深色渐变（深蓝到深紫），不要纯黑"

你学到的新能力

这个项目让你掌握了一个和之前完全不同的概念：程序可以在后台持续运行。

| 之前学的 | 这次学的 | |----------|----------| | 个人主页：等用户操作（点击链接） | 倒计时：什么都不做也在自动更新 | | 待办清单：用户触发 → 程序响应 | 倒计时：时间流逝 → 程序响应 |

这叫定时任务（setInterval），几乎无处不在：网页时钟、轮播图、自动保存草稿、消息通知小红点、实时股票行情……

进阶挑战

• 添加多个倒计时同时运行（春节 + 生日 + 考试）
• 倒计时最后 10 秒数字变红闪烁
• 时间到了播放提示音
• 添加"快速设定"按钮（+1 天、+1 周、+1 月）
• 让用户给倒计时起名字（"距离毕业还有"）

常见问题

"倒计时不准，差了一两秒。"——浏览器中的 setInterval 不是绝对精确的，有 1-2 秒误差完全正常。入门阶段不需要纠结毫秒级精度。