Fandom Developers Wiki
Advertisement

倒计时Countdown)脚本会在指定的位置创建倒计时时钟。

脚本用途

本脚本会用一个倒计时替代添加至页面中的目标时间元素,直到到达该时间的日/时/分/秒。

安装

创建倒计时

倒计时可以使用以下格式添加至页面:

<span class="countdown" style="display:none;">还有<span class="countdowndate">January 01 2022 00:00:00</span>就到新年啦!</span>

“countdown”内的文字只在倒计时生效时显示。“countdowndate”前的所有文字会显示在倒计时的前面,“countdowndate”后所有文字会显示在倒计时的后面。

上面的示例代码显示效果为:

(倒计时示例)


一个可选的“nocountdown”类的span可以用作倒计时脚本不生效或正在加载时的替代文字。

  • 例如:使用<span class="nocountdown">就快到新年啦!</span>会让脚本
    在加载时显示为“就快到新年啦!

该span应放直接放置在上面的倒计时代码后面。

时区

使用上面的示例代码时,倒计时会按照读者的系统时钟工作。虽然这在新年倒计时等情况下很实用,但在其他情况下可能不适用。

有两种方法可以用于使倒计时基于指定时区来工作。最简单的方法是在代码的末尾添加时区标识符。例如设置美国东部标准时间(EST)的倒计时:

<span class="countdowndate">January 01 2022 00:00:00 EST</span>

尽管这种方法适用于大多数标识符,但对某些夏令时变体(如英国夏令时,BST)不起作用。

另一种更可靠的方法是在代码的末尾添加协调世界时(UTC)的时差。例如设置EST的倒计时,其时差为-5小时:

<span class="countdowndate">January 01 2022 00:00:00 -0500</span>

请注意,夏令时开始和结束时,倒计时不会自动更改,必须由用户手工设置——要么使用夏令时标识符,要么使用UTC时差。

选项

结束倒计时

你希望怎样结束倒数计时?有五种选择:

  1. 从零开始正数计时 - 出于历史原因,这是默认选项
  2. 删除倒计时容器
  3. 在倒计时到零时停止
  4. 用其他内容替换倒计时
  5. 按你的需要调用自定义JavaScript函数

正计时

这是默认选项,什么都不做就会选择该项。

删除

添加值为“remove”的data-end属性至容器:

<span data-end="remove" class="countdown" style="display:none;"><!--
-->还有<span class="countdowndate">January 01 2022 00:00:00</span>就到新年啦!<!--
--></span>

停止

添加值为“stop”的data-end属性至容器:

<span data-end="stop" class="countdown" style="display:none;"><!--
-->还有<span class="countdowndate">January 01 2022 00:00:00</span>就到新年啦!<!--
--></span>

替换

添加值为“toggle”的data-end属性至容器。另外,你还需要添加选择器data-toggle属性,指向替换内容:

<span data-end="toggle" data-toggle=".post-countdown" class="countdown" style="display:none;"><!--
-->还有<span class="countdowndate">January 01 2022 00:00:00</span>就到新年啦!<!--
--></span><span class="post-countdown" style="display:none;">2022年新年快乐!</span>

请注意data-toggle的值中的点!预期的值是一个CSS或jQuery选择器。这就是类的“.name”,“#name”表示ID。等等。

另外,如果切换容器是在计数器之后,可以使用特殊值data-toggle="next",而不需指定任何选择器。这在使用多个倒计时作为模板的一部分时非常有用。

Add a data-end attribute with the value "toggle" to the container. Additionally you will have to add a data-toggle attribute with a selector that points to the replacement:

Note the dot in the value of data-toggle! The expected value is a CSS or jQuery selector. So that's ".name" for classes. "#name" for IDs. Etc.

Alternatively, if the toggle container is the following one after the counter, the special value data-toggle="next" can be used instead, without needing to specify any selector. This is useful when using multiple countdowns as part of a template, for instance.

自定义回调

在容器中添加一个data-end属性,值为“callback”。此外,你还必须添加一个data-callback属性,其中包含你要调用的函数名称。

<span data-end="callback" data-callback="myFunction" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2022 00:00:00</span> until the new year...<!--
--></span>

倒计时将在零点停止,然后您的函数将被调用。倒计时容器将是函数的this对象。

要让倒计时模块使用该功能,您必须将其添加到模块本身。

window.countdownTimer = {
    myFunction: function () {
       $(this).text('Happy 2022!');
    }
}

前导零

默认情况下,前导零(Leading Zeros)将显示。

0 days, 0 hours, 10 minutes and 10 seconds

如果您喜欢这样做的话:

10 minutes and 10 seconds

你需要添加一个data-options属性,值为“no-leading-zero”。

<span data-options="no-leading-zeros" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2022 00:00:00</span> until the new year...<!--
--></span>

简短格式

如果您希望以简短的格式显示倒计时,如2d 5h 30m 1s,而不是完整的字词显示倒计时,您需要添加一个data-options属性,其值为“short-format”。

如果您已经设置了data-options属性,请将所有的选项用空格隔开。

<span data-options="no-leading-zeros short-format" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2022 00:00:00</span> until the new year...<!--
--></span>

动态内容

本脚本支持动态插入的内容,例如文章注释或编辑器预览。但是,如果通过JavaScript插入计数器,则需要在插入事件后触发此事件:

mw.hook('wikipage.content').fire($('ELEMENT'));

其中ELEMENT是插入计数器的元素的选择器。


Advertisement