Line 1: |
Line 1: |
| <includeonly><div style="{{{style|text-align:center;font-size:18px;font-weight:bold;color:red;margin:0px 0px 10px 0px}}}"> | | <includeonly><div style="{{{style|text-align:center;font-size:18px;font-weight:bold;color:red;margin:0px 0px 10px 0px}}}"> |
− | <span class="countdown" data-options="no-leading-zeros" data-end="toggle" data-toggle=".{{{endClass|countdownComplete}}}" style="display:none"> | + | <span class="countdown" data-options="no-leading-zeros" data-end="toggle" data-toggle=".{{{class|{{{endClass|countdownComplete1}}}}}}" style="display:none"> |
| <span class="countdowndate">{{{time|}}}</span> | | <span class="countdowndate">{{{time|}}}</span> |
| </span> | | </span> |
− | <span class="{{{endClass|countdownComplete}}}" style="display:none">{{{endText|Countdown complete!}}}</span> | + | <span class="{{{class|{{{endClass|countdownComplete1}}}}}}" style="display:none">{{{text|{{{endText|Countdown complete!}}}}}}</span> |
| </div></includeonly><noinclude> | | </div></includeonly><noinclude> |
| ==Parameters== | | ==Parameters== |
− | * <code>time</code> : time to countdown to, required. | + | * <code>time</code> : [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse time] to countdown to, required. |
| * <code>style</code> : custom style, optional. | | * <code>style</code> : custom style, optional. |
− | * <code>endClass</code> : specify when multiple timers are used on the page, <code>countdownComplete</code> by default, e.g., <code>countdownComplete2</code> for a second timer, etc. | + | * <code>class</code> : specify when multiple timers are used on the page, <code>countdownComplete1</code> by default, e.g., <code>countdownComplete2</code> for a second timer, etc. |
− | * <code>endText</code> : optional completion text, <code>Countdown complete!</code> by default. | + | * <code>text</code> : optional completion text, <code>Countdown complete!</code> by default. |
| See [[MediaWiki:Gadget-Countdown.js]] for JS implementation details. | | See [[MediaWiki:Gadget-Countdown.js]] for JS implementation details. |
| ==Examples== | | ==Examples== |
| + | <pre> |
| + | {{Timer|time = January 1 2021 00:00:00 +0900}} |
| + | </pre> |
| + | {{Timer|time = January 1 2021 00:00:00 +0900}} |
| <pre> | | <pre> |
| {{Timer | | {{Timer |
| |time = January 1 2025 00:00:00 +0900 | | |time = January 1 2025 00:00:00 +0900 |
− | |style = font-weight:italic | + | |style = font-style:italic |
− | |endClass = countdownComplete1 | + | |class = countdownComplete2 |
− | |endText = Not yet. | + | |text = Not yet. |
| }} | | }} |
| </pre> | | </pre> |
| {{Timer | | {{Timer |
| |time = January 1 2025 00:00:00 +0900 | | |time = January 1 2025 00:00:00 +0900 |
− | |style = font-weight:italic | + | |style = font-style:italic |
− | |endClass = countdownComplete1 | + | |class = countdownComplete2 |
− | |endText = Not yet. | + | |text = Not yet. |
| }} | | }} |
| <pre> | | <pre> |
Line 30: |
Line 34: |
| |time = January 19 2038 12:14:07 +0900 | | |time = January 19 2038 12:14:07 +0900 |
| |style = font-weight:bold | | |style = font-weight:bold |
− | |endClass = countdownComplete2 | + | |class = countdownComplete2 |
− | |endText = The time is now! | + | |text = The time is now! |
| }} | | }} |
| </pre> | | </pre> |
Line 37: |
Line 41: |
| |time = January 19 2038 12:14:07 +0900 | | |time = January 19 2038 12:14:07 +0900 |
| |style = font-weight:bold | | |style = font-weight:bold |
− | |endClass = countdownComplete2 | + | |class = countdownComplete2 |
− | |endText = The time is now! | + | |text = The time is now! |
| }} | | }} |
| </noinclude> | | </noinclude> |