这是一个会显示倒计时器的组件。给它一个时间戳它就会倒计时到那个时刻。
演示
[[embed]]
<iframe src="https://scpsandboxcn.wdfiles.com/local--html/countdown-timer-demo/fe172d527adc274ad216eb3d9f372d164e761a50-593590574328366437/scpsandboxcn.wikidot.com/" allowtransparency="true" class="html-block-iframe" style="height: 3rem"></iframe>
[[/embed]]
更多展示例：https://scpsandboxcn.wikidot.com/countdown-timer-demo
用法
将以下代码放在页面里：
[[##var(—c-builtin)|include:scp-wiki-cn:component:countdown
timestamp = 1752897600
format = DDd HH:MM:SS
text_when_elapsed = 计时器已结束。
css =
.countdown {
font-size: 2em;
font-weight: bold;
text-align: center;
}
]]
支持以下参数。如果你省略了一个可选设置，那么它将会使用其默认值。
在倒计时器永久结束计时后，其内容将几乎保持静态，倒计时功能也不再可用。在你方便时，你应当从页面上移除本倒计时器并以正常内容替换。
如果你需要帮助，跟
Croquembouche（就是我）说一声。
选择一个时间戳
该组件使用UNIX时间戳，也即自UTC时间1970年起经过的秒数。一个给定的UNIX时间戳对所有人都意味着相同的时间，无论人们在世界上所处的位置如何——不需要处理时区与本地化了。
例如：
1767225600- 倒数至UTC 2026元旦午夜，1863561600- 倒数至UTC 2029-01-20午夜
有很多免费资源可以得到你脑中的截止时间所对应的UNIX时间戳，比如https://www.unixtimestamp.com/。
如果你真的需要时区本地化，我们有这个功能的组件：component:tz
时间戳列表
你可以传入一个以逗号分隔开的时间戳列表。组件将选择第一个不在过去的时间。
在当前时间达到该时间戳时，计时器将停止。它不会自动跳至列表中的下一个时间戳，而是展示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点
除非你是天才，试图理解这里的算术要花一点时间。可以供你所知的是，我不是个天才，而上面的那些方程式也描述了对我而言忘记它们怎么运作需要多长时间。
+ 等下，啥？怎么运作的？
以t - (t % 60) + 60为例，这会倒计时至恰一分钟后。
假设当前时间是09:41:33 AM——那么当下的时间戳就是1776069693。于是我们想让我们的计时器倒数27秒。我们该怎么得出这个方程呢？
t= 1776069693，也就是09:41:33 AM。t % 60= 1776069693 mod 60，也就是你把尽可能多的60从1776069693减掉之后的余数。你可以把29,601,161个60从1776069693上减掉，留下余数33。因此，t % 60= 33。t - (t % 60)= 1776069693 - 33 = 1776069660。那也是时间戳——09:41:00 AM。我们成功去掉了33秒, 把时间取整到了最接近的整分钟。- 09:41:00 AM比当前时间，09:41:33 AM早，所以这会使计时器立刻显示为已停止的状态。我们会加上60秒从而向前移动恰好一分钟：
t - (t % 60) + 60= 1776069720，也就是09:42:00 AM。 - 09:42:00 AM距现在（09:41:33 AM）有27秒，所以计时器会持续27秒之后停止。
值得注意的是这个过程发生在，大概是，一微秒之内，所以我们不用担心现在不再是现在了。
CSS结构
就CSS改变样式而言，这就是iframe里内容的结构。检查页面源代码以获取全部细节。
@@ <div class="countdown">@@
@@ <span class="timer timer—active">00:00:00</span>@@
@@ <!— 只在计时器停止时显示 >@@elapsed">计时器已结束。</span>@@
@@ <span class="timer timer
@@ </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级）：即便含有大号的花哨字体，该计时器每秒最多闪烁一次，低于最大阈值（每秒三次闪烁）。