Countdowns have five important and necessary parts:
<div id="countdown" style="display: none"> [...] </div>: This is the countdown container. Other styles and classes can be applied. When the code activates, the countdown container is unhidden.<div id="countdown-big"></div>: This displays the days and is kept inside the countdown container. Styles and classes can be applied. If the event takes place within 24 hours, this is empty. If the date at the time zone mentioned matches the date coded, this displays "Today". If the event has passed, this displays "Past" instead.<div id="countdown-small"></div>: This displays the hours, minutes, and seconds and is kept inside the countdown container. Styles and classes can be applied.<div id="countdown-target"></div>: This displays the date that is being counted down to and the timezone of the date. It is kept inside the countdown container. Styles and classes can be applied.<countdown />: This sets the date and time zone to which it should count down. Parameters:
year: The year of the date to which it should count down to.month: The month of the date to which it should count down to.day: The day of the date to which it should count down to.tz: The timezone it should count down in (e.g. EST, EDT, PST, JST). If a switch in daylight savings time status occurs during the countdown, it should be set to the status at the end of the countdown. Additional text may be added to this parameter.tzoffset: The timezone offset it should count down in (e.g. -5, -4, +8). If a switch in daylight savings time status occurs during the countdown, it should be set to the status at the end of the countdown.
Only one countdown can be used per page as necessary functionality requires that each countdown has these IDs.
If the date to which it should count down requires the use of parser functions or other wikicode, the {{#tag:}} parser function should be used.
Internally, countdowns are operated throughout the parsing of the <countdown /> element by the MediaWiki software and the JavaScript contained in MediaWiki:Common.js
For example, the following countdown will count down to the release of Pokémon Sun and Moon in Japan, and if that has occurred, January 1 of next year in New York time:
Code:
<div id="countdown" class="roundy" style="font-family: 'Trebuchet MS', sans-serif; font-size: 150%; text-align: center; padding: 0.5em; display: none; background:#{{gold color}};">
<div id="countdown-big" style="line-height: 100%; font-size: 250%; color:#000;"></div>
<div id="countdown-small" style="line-height: 120%; color:#000;"></div>
<div id="countdown-target" style="font-size: smaller; line-height: 120%; color:#000;"></div>
{{#ifexpr: {{#time: U |+9 hours}} < 1479445200|<div style="font-size: smaller; line-height: 120%; color:#000;">release of [[Pokémon Sun and Moon]] in Japan!</div>}}
</div>
{{#ifexpr: {{#time: U |+9 hours}} < 1479445200
|{{#tag: countdown||year=2016|month=11|day=18|tz=JST (UTC +9) and the|tzoffset=+9}}
|{{#tag: countdown||year={{#expr: {{#time: Y |-29 hours}} + 1}}|month=1|day=1|tz=EST (UTC -5)|tzoffset=-5}}
}}
Line spacing
- no extra spacing
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. いくZ！！激しく燃えるバトル Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- 200% line spacing; 50% ruby
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. いくZ！！激しく燃えるバトル Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- 212.6% line spacing; 75% ruby
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. いくZ！！激しく燃えるバトル Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Complex
| Normal size ruby
|
75% size ruby
|
Theoretical wikicode
|
| いくZ！！激しく燃えるバトル
|
いくZ！！激しく燃えるバトル
|
{{ruby|lang=ja
|{{rbc|いく|Z|！！|激|しく|燃|える|バトル}}
|{{rtc|いく|ぜ|！！|はげ|しく|も|える|バトル}}}}
|{{rtc|position=under|lang=en|spaces=yes|Iku|ze|!!|Hage|shiku|mo|eru|batoru}}}}
|
|
いくZ！！激しく燃えるバトル
|
いくZ！！激しく燃えるバトル
|
{{ruby|lang=ja
|{{rbc|いく{{ruby|rb=Z|rt=ぜ}}！！|{{ruby|rb=激|rt=はげ}}しく|{{ruby|rb=燃|rt=も}}える|バトル}}
|{{rtc|position=under|lang=en|spaces=yes|Ikuze!!|Hageshiku|moeru|batoru}}}}
|
| いくZ！！激しく燃えるバトル
|
いくZ！！激しく燃えるバトル
|
{{ruby|lang=ja
|{{rbc|い|く|Z|！！|激|し|く|燃|え|る|バ|ト|ル}}
|{{rtc|い|く|ぜ|！！|はげ|し|く|も|え|る|バ|ト|ル}}}}
|{{rtc|position=under|lang=en|spaces=yes|i|ku|ze|!!|hage|shi|ku|mo|e|ru|ba|to|ru}}}}
|
<ruby lang="{{{lang|ja}}}">
{{{1|<rb>{{{rb}}}</rb>}}}
{{{2|<rp>(</rp><rt lang="{{{rtlang|ja}}}">{{{rt}}}</rt><rp>)</rp>}}}
{{{3|}}}
</ruby>
<!-- <rbc> -->
{{#if:{{{1|}}}|<rb>{{{1}}}</rb>}}{{#if:{{{2|}}}|<rb>{{{2}}}</rb>}}
[...]
{{#if:{{{12|}}}|<rb>{{{12}}}</rb>}}
<!-- </rbc> -->
<rtc lang="{{{lang|ja}}}" style="ruby-position: {{{position|over}}}">
<!--
<rp>(</rp>{{#if:{{{1|}}}|<rt rbspan="{{{rbspan1|1}}}">{{{1}}}</rt>}}{{#if:{{spaces|}}}| }}{{#if:{{{2|}}}|<rt rbspan="{{{rbspan2|1}}}">{{{2}}}</rt>}}{{#if:{{spaces|}}}| }}
[...]
{{#if:{{{12|}}}|<rt rbspan="{{{rbspan12|1}}}">{{{12}}}</rt>}}<rp>)</rp>
-->
<rp>(</rp>{{rbspan|{{{rbspan1
{{#if:{{{1|}}}|<rt>{{{1}}}</rt>}}{{#if:{{spaces|}}}| }}{{#if:{{{2|}}}|<rt>{{{2}}}</rt>}}{{#if:{{spaces|}}}| }}
[...]
{{#if:{{{12|}}}|<rt>{{{12}}}</rt>}}<rp>)</rp>
</rtc>
|
ぜ |
|
はげ |
|
も
|
| いく |
Z |
！！ |
激 |
しく |
燃 |
える |
バトル
|
| Ikuze!! |
Hageshiku |
moeru |
batoru
|
