注意
此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。
未经组件作者或工作人员允许，请勿修改此页的内容。
这是一个会显示倒计时器的组件。给它一个时间戳它就会倒计时到那个时刻。
演示
更多展示例：https://scp-sandbox-3.wikidot.com/demo:countdown-timer
用法
将以下代码放在页面里：
[[include :scp-wiki-cn:component:countdown
| timestamp = 1752897600
| format = DDd HH:MM:SS
| text_when_elapsed = Timer ended.
| css =
.countdown {
font-size: 2em;
font-weight: bold;
text-align: center;
}
]]
支持以下参数。如果你省略了一个可选设置，那么它将会使用其默认值。
在倒计时器永久结束计时后，其内容将几乎保持静态，倒计时功能也不再可用。在你方便时，你应当从页面上移除本倒计时器并以正常内容替换。
选择一个时间戳
该组件使用UNIX时间戳，也即自UTC时间1970年起经过的秒数。一个给定的UNIX时间戳对所有人都意味着相同的时间，无论人们在世界上所处的位置如何——不需要处理时区与本地化了。
例如：
- 1767225600 - 倒数至UTC 2026元旦午夜，
- 1863561600 - 倒数至UTC 2029-01-20午夜
有很多免费资源可以得到你脑中的截止时间所对应的UNIX时间戳，比如https://www.unixtimestamp.com/。
如果你真的需要时区本地化，我们有这个功能的组件：时区转换器
时间戳列表
你可以传入一个以逗号分隔开的时间戳列表。组件将选择第一个不在过去的时间。
在当前时间达到该时间戳时，计时器将停止。它不会自动跳至列表中的下一个时间戳，而是展示text_when_elapsed的内容。在该页面下次加载时它将开始向列表中的下一个时间戳倒数。
时间戳表达式
假使你需要一个自适应的倒计时，例如：不断重复，或取决于页面加载时的时间，你可提供一表达式而非固定的时间戳。
表达式中，字母“t”将被替换为页面加载完成时的时间戳，余下部分被传至Javascript的计算中。输出必须为需要倒计时至的另一个时间戳。
例如：
- t + 60 - 自页面加载完成后倒数60秒
- t - (t % 60) + 60 - 倒计时至下一个整分钟时。（就是把当前的时间戳，减去其本身对60取余之结果以向下取整至一个分钟开始处。这将返回一个处于过去的时间戳，故而加60将之推向未来)
- t - (t % 3600) + 3600 - 倒计时至下一个整点时
- Math.floor(t / 86400) * 86400 + 86400 - 倒计时至UTC午夜
- Math.floor(t / 86400) * 86400 + 86400 + 21600 - 倒计时至UTC6点
除非你是天才，试图理解这里的算术要花一点时间。我每次看到它的时候就会花上一点时间。
CSS结构
就CSS改变样式而言，这就是iframe里内容的结构。检查页面源代码以获取全部细节。
<div class="countdown">
<span class="timer timer--active">00:00:00</span>
<!-- 只在计时器停止时显示 -->
<span class="timer timer--elapsed">Timer ended.</span>
</div>
iframe本身位于带有类.countdown-wrapper的div之中。
进阶CSS
你可以使用CSS在计时器停止时令页面发生变化。选择器.countdown-wrapper:has(iframe[style*=".01px"])会匹配一个已结束的倒计时。在展示页上有个例子。
无障碍
构建本倒计时器时已考虑到对无障碍性之最佳实践。使用本组件前考虑先阅读下文，这样你就不会因为做了蠢事搞砸我完美的造物。
太长不看：避免在读者仍在阅读时使用本组件移除内容，因为这将造成含障碍的体验。
ARIA属性：
- 本计时器使用了ARIA角色"timer"，这代表它对于屏幕阅读器用户而言是计时器但无需随着计时器每秒变换时重复将其读出。
- 当计时器结束倒计时时，它使用aria-live="polite"以在一段时间的静默后彬彬有礼地向屏幕阅读器用户宣读你的text_when_elapsed——只要这段文字不是形如“00:00:00”就会被读出。
遵从WCAG 2.2：
- 成功标准2.2.1 定时可调（A级）：若该计时器被用于与一真实事件同步（例如：竞赛结束，系列文章发布），则此要求被免除。若该计时器被用于在读者继续阅读前人为延迟之，则该行为违背了指南之字面意义而未违反其精神，因其意图为给予用户足够时间以完成一行为，并且用户在计时终止后便可继续阅读。若你将本计时器用于在读者有完整阅读之可能前移除内容，则违反了本指南。
- 成功标准2.2.2 暂停，停止，隐藏（A级）：在悬停或获得焦点时，应显示一个可通过点击或键盘交互暂停计时器的按钮。
- 成功标准2.2.3 无定时（AAA级）：只要该计时器不被用于自用户处移除内容，这被视为可行的。若该组件被用于设定一个时间限制而非只是倒计时至某一时刻，则不适用此条。
- 成功标准2.3.2 闪烁三次 （AAA级）：即便含有大号的花哨字体，该计时器每秒最多闪烁一次，低于最大阈值（每秒三次闪烁）。