FANDOM


倒计时脚本可以让您在指定位置创建倒计时时钟。

有啥作用

您可以在页面添加一个带有目标日期的元素,本脚本将用倒计时来替代日期,直到现在日期到达目标日期的日/时/分/秒。

安装方法

参见:帮助:高级CSS和JS

您可以使用新的安装方法进行安装,在您wiki的MediaWiki:ImportJS页面添加以下内容:

dev:Countdown/code.js

您也可以使用旧的安装方法进行安装,在您wiki的MediaWiki:Common.js页面添加以下内容:

importArticles({
    type: "script",
    articles: [
        "w:c:dev:MediaWiki:Countdown/code.js"
    ]
});

如果您wiki的MediaWiki:Common.js页面已经有了像上述的导入,您只需在导入列表中添加"w:c:dev:MediaWiki:Countdown/code.js"即可,您可以参见此页所述。

创建倒计时

您可以使用以下格式将倒计时添加到页面:
<span class="countdown" style="display:none;">Only <span class="countdowndate">January 01 2021 00:00:00</span> until the new year...</span>

"countdown"内的文本只有在倒计时活动时才会显示,在"countdowndate"之前的文本会显示在倒计时时钟文本之前,在"countdowndate"之后的文本会显示在倒计时时钟文本之后。

上述的示例会生成:

(Countdown example)

当倒计时脚本不运行或加载时,可以使用一个带有"nocountdown"类的可选范围作为替代文本。

  • 例如,当脚本运行时,使用<span class="nocountdown">就快到新年了!</span>会生成
    "就快到新年了!"

此范围应放在上述的倒计时代码之后。

时区

使用上述的示例代码,倒计时是相对于读者的系统时钟运行的。虽然这在新年倒计时等情况下可能很有用,但在其他情况下却不切实际。

有两种方法可以用来使倒计时基于特定的时区运行。最简单的方法是在代码的末尾添加时区标识符。例如,以东部标准时间(EST)进行倒计时:

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

虽然这种方法适用于大多数标识符,但仍对一些夏令时变体(例如英国夏令时 - BST)不起作用。

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

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

请注意,与夏令时之间的更改不会自动完成,必须由用户自己完成——使用夏令时标识符或使用UTC时差。

选项

结束倒计时

您希望倒数计时如何结束?有五个选项:

  1. 从零开始计数 - 由于遗留原因,这是默认设置
  2. 移走倒计时容器
  3. 归零倒计时
  4. 用其他东西代替倒计时
  5. 调用您选择的自定义JavaScript函数

计数

这是默认选项,所以您不需要做什么。

移除

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

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

停止

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

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

替换

向容器添加值为“toggle”的data-end属性。此外,您还必须添加一个data-toggle属性,并带有一个指向替换项的选择器:

<span data-end="toggle" data-toggle=".post-countdown" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2021 00:00:00</span> until the new year...<!--
--></span><span class="post-countdown" style="display:none;">Happy 2021!</span>

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

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

自定义回调

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

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

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

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

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

前导零

默认情况下,前导零(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 2021 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 2021 00:00:00</span> until the new year...<!--
--></span>

动态内容

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

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

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

本地化

可以使用language code作为键(key)来添加本地化消息,然后为消息创建对象。关于如何覆盖英语语言的默认消息,请看下述例子。

countdownTimer.translations = { 
    en: {
        and: 'and',
        second: 'second',
        seconds: 'seconds',
        minute: 'minute',
        minutes: 'minutes',
        hour: 'hour',
        hours: 'hours',
        day: 'day',
        days: 'days'
    }
};

添加翻译

该脚本需要以下时间间隔的本地等效项:

  • second/seconds(秒)
  • minute/minutes(分钟)
  • hour/hours(小时)
  • day/days(天)

此外,还需要“and”(和)的本地化版本。

如果您愿意添加,可以在脚本讨论页发布您的翻译(如果您有能力且愿意的话也可以在MediaWiki:Countdown/code.js直接添加翻译)

主要更新

2017年10月21日
Jorgemg14:新增短格式选项
2017年6月15日
Jorgemg14:支持动态内容
December 9, 2012
Pecoes:改写。
June 28, 2012
Eladkse:简化单数/复数代码。
January 31, 2012
Eladkse:由Dantman添加本地化代码。
2011年7月7日
Eladkse:增加代码,允许定义时间的单数和复数形式。
Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+