如何设置倒计时

无论是产品发布、婚礼、截止日期还是除夕,倒计时把一个抽象的未来日期变成可触摸的东西,天、小时、分、秒一点点往零走。盯着数字缩小,有一种真实的心理拉力:它让注意力收拢,堆叠期待,并为所有看着同一个目标的人创造一个共享的时刻。

倒计时简史

倒计时本身,10-9-8 直到零,由 Fritz Lang 在 1929 年为默片「Die Frau im Mond」(月里嫦娥)发明。他最初拍的发射场景显得平淡,于是加上降序计数来抬升张力。他的科学顾问,包括 Hermann Oberth,把这个点子带回了德国宇航协会;这做法在 NASA 第一次卫星发射(Explorer 1, 1958 年 1 月)成为标准,从此与火箭发射密不可分。1969 年 7 月阿波罗 11 号的倒计时被估计有 6.5 亿人现场观看,是当时单一事件最大的观众数。

倒计时比数字屏幕早了几个世纪。装沙的沙漏,可追溯到大约 8 世纪的欧洲,在船只值班和教会礼拜中起同样的作用。机械厨房计时器在第二次世界大战之后变得普遍,那种带发条的红色圆形小盒依然是「还剩 N 分钟」最经典的形象。1907 年开始的纽约时代广场跨年水晶球下落,本质上就是一个公开的、机械的倒计时。

软件倒计时随上世纪 70 年代和 80 年代的家用电脑出现,通常是游戏计时器的一部分。基于 Web 的倒计时随着 JavaScript 的 setInterval(1996 年 3 月在 Netscape Navigator 2.0 中引入)变得切实可行;2000 年代初期粉丝站点上整类「距离电影上映还有多少天」页面,都是基于这套 API 的寥寥几行代码搭建的。

如何设置倒计时

1. 设定目标日期与时间。选择事件、截止日或里程碑的日期和时间。时间一定要写清楚,只有日期的倒计时默认是当地时区的午夜。
2. 加一个标签。给倒计时起个名字,比如「产品发布」或「假期」,这样你一眼就能想起在等什么。标签会出现在页面标题和分享链接预览里。
3. 如果时区重要,先选好。对于另一个时区有固定本地时间的事件(太平洋时间上午 9 点的会议,UTC 14:30 的发射),把目标按那个时区显式输入,这样全球的受众看到的都是正确的时刻。
4. 生成分享链接。工具把目标日期、标签和时区编码进 URL 本身,所以收到链接的人看到的是同一个倒计时。
5. 看着它走。计时器每秒更新,显示剩余的天、小时、分钟和秒。归零时,页面切换到「已发生」状态,如果你愿意它还会继续向上数。

可以倒数的目标

• 事件:婚礼、生日、演唱会、会议、节日、体育决赛、季播首播。
• 截止日:项目交付日、申请截止日、考试日、报税日、比赛投稿。
• 发布:产品发布、网站上线、活动启动、火箭发射、门店开业。
• 个人里程碑:退休、毕业、搬家日、旅行、宝宝预产期、戒断里程碑。
• 周期性归位:季度结束、冲刺结束、下班、下一次礼拜。
• 消极期待:下一场会议、看牙医,任何「看着它走」反而能让等待好过一点的场合。

分享倒计时

点击分享链接按钮即可得到一条 URL,其中编码了你的目标日期、时间、标签和时区。任何人打开这条链接,在自己的浏览器里看到的就是同一个倒计时。没有账号、没有数据库,也没有什么需要托管:整个状态都活在 URL 的查询字符串里。这一点很方便:

• 在群聊里把发布倒计时分享给团队。
• 通过邮件把婚礼倒计时发给亲朋好友。
• 在 Notion 或 Confluence 页面里嵌入一个截止日提醒链接。
• 在营销落地页上钉一个公开发售倒计时。

因为 URL 就是真相之源,你可以加书签、跨设备分享,或者粘到项目跟踪器里,而不必担心状态会过期。

倒计时如何保持准确

每秒把一个数字减一的天真倒计时很脆弱。如果标签页失去焦点、笔记本休眠或者设备进入睡眠,计数器就会落在真实时间后面,显示出错几分钟甚至几个小时的值。修正办法是从墙钟时间计算剩余,而不是从已流逝的滴答数计算。

我们的计时器走的是这条路:每一帧动画(或后台标签页每一秒),都调用一次 Date.now(),从目标时间戳里减去它,然后渲染差值。间隔只是重绘的节奏装置,不是真相之源。关闭标签页、断网、把手机锁屏,都没有影响;重新打开页面,计时器在一个滴答内就回到正确的剩余时长。

这一点之所以重要,是因为现代浏览器对后台标签页的处理。自 2011 年以来,Chrome 和 Firefox 都在激进地节流不活动标签页里的计时器以节省电量;Chrome 88(2021)引入了「重度节流」,后台计时器可能每分钟才跑一次。Page Visibility API(W3C, 2011)告诉页面它何时被隐藏,以便暂停非必要的工作。基于墙钟的倒计时把这些复杂全部忽略:它不在乎自己多久滴答一次,因为每次滴答都渲染正确值。

常见陷阱

• 只输入日期默认是午夜。设成「12 月 25 日」不带时间,得到的是当天 00:00。如果你想的是上午 9 点,就差了九小时。
• 夏令时切换。倒计时指向「3 月 14 日本地 02:30」,在春令时把 02:00 跳到 03:00 的地区里是未定义的。换一个时间,或者指定 UTC 偏移。
• 观看者时区不一致。「3 月 14 日中午」对纽约和东京的观看者是不同的绝对时刻。在链接里编码绝对时间戳,而不是本地时间字符串。
• 浏览器计时器节流。如果你自己用 setInterval(fn, 1000) 搭倒计时,后台标签页可能每 30 到 60 秒才跑一次 fn。在每次滴答里从 Date.now() 重算,而不是减一个变量。
• 设备时钟错的。由 Date.now() 驱动的倒计时信任设备时钟。一台时钟偏 10 分钟的笔记本会显示偏 10 分钟的倒计时。除了走一遍 NTP 没法修;代价就是隐私和离线能力。
• 闰秒与 ISO 8601。大多数浏览器不表示闰秒,而是把它平滑掉;对亚秒级敏感的应用(金融市场开盘、火箭发射),用 UTC 并接受平滑。
• 最后 60 秒标签页标题闪烁。这种吸引注意的常用伎俩同时也耗电;最多每秒一次。
• 过零之后没有兜底。明确决定零点发生什么,一条静态「已发生」消息、一个向上计的已经过去时间、或者重定向到庆祝页面。
• 通知权限中断。如果计时器在零点用声音或系统通知敲钟,提前请求权限,不要拖到最后一秒。
• 移动端自动播放限制。iOS Safari 上,计时器归零时音频不能自动启动;用户必须至少与页面交互过一次。展示一个按钮,而不是依赖自动播放。

替代工具与场景

基于浏览器的倒计时摩擦最低:不用安装,即时分享链接,到处都能跑。其它工具适合其它场景。

对于一次性公开截止日和活动页,基于 URL 可分享的网页倒计时在速度和零基础设施上胜出。对于个人节奏(烹饪、Pomodoro),手机原生计时器通常更快。

更好用倒计时的建议

• 设定精确时间。下午 6 点的主题演讲就要设 18:00,不只是日期。只有日期的倒计时默认是午夜。
• 给链接加书签。把 URL 存起来,在任何设备上都能快速打开。目标日期被编码在 URL 里,意味着即便闲置数周再回来,倒计时也能正确续上。
• 在干净浏览器里测试分享链接。用隐私窗口打开链接,验证显示是否符合预期,特别是跨时区时。
• 选择合理的颗粒度。事件距现在超过一天用天和小时;最后一小时切换到分钟和秒。
• 结合日历邀请使用。实时倒计时堆叠期待;日历条目才真正把事件放进某人的日程。两者一起用。
• 把时刻标记出来。决定零点之后做什么,一张庆祝 GIF、一颗显现的发布按钮、一个 Zoom 链接,让倒计时有真正的去处。
• 用中性颜色和高对比版式。有人会让它在标签页里开一整天;刺眼的红色一小时后就让人疲惫。
• 尊重减少动画。遵循用户的 prefers-reduced-motion 设置,在开启时跳过花哨的过渡。

隐私与无障碍

倒计时完全运行在你的浏览器里。目标日期、标签、时区,以及任何生成的分享 URL,从不接触服务器。什么都不会被记录,什么都不会被追踪,也不需要账号:倒计时状态住在 URL 本身,这就是它无需后端依然可分享的原因。如果你想让倒计时在零点播放声音或发送系统通知,浏览器会显式向你请求权限,你可以在浏览器站点设置里随时撤销。

对屏幕阅读器用户,倒计时通过一个 aria-live 区域宣读剩余时间,这样每次更新都会读出,不需要你刷新或重新聚焦页面。动画尊重 prefers-reduced-motion。颜色满足 WCAG AA 对比度,版式在小屏上(竖向手机)会重新排布。整个工具一旦页面加载完成就可以离线运行,你可以关掉网络看计时器继续滴答来验证。