- Welcome to the Kancolle Wiki!
- If you have any questions regarding site content, account registration, etc., please visit the KanColle Wiki Discord
Difference between revisions of "Template:Timer"
Jump to navigation
Jump to search
(countup re-implementation. Timers can now count the other way.) |
(enabling use of hidden "short-format" via "short=") |
||
| Line 1: | Line 1: | ||
<includeonly><div style="{{{style|text-align:center;font-size:18px;font-weight:bold;color:red;margin:0px 0px 10px 0px}}};{{{extra_style|}}}"> | <includeonly><div style="{{{style|text-align:center;font-size:18px;font-weight:bold;color:red;margin:0px 0px 10px 0px}}};{{{extra_style|}}}"> | ||
| − | <span class="countdown" data-options="no-leading-zeros" {{#if:{{{countup|}}}||data-end="toggle" data-toggle=".{{{class|{{{endClass|countdownComplete{{{2|1}}}}}}}}}"}} style="display:none"> | + | <span class="countdown" data-options="no-leading-zeros;{{#if:{{{short|}}}|short-format}}" {{#if:{{{countup|}}}||data-end="toggle" data-toggle=".{{{class|{{{endClass|countdownComplete{{{2|1}}}}}}}}}"}} style="display:none"> |
<span class="countdowndate">{{{1|{{{time|}}}}}}</span> {{#if:{{{countup|}}}|{{{text|{{{endText|}}}}}}}} | <span class="countdowndate">{{{1|{{{time|}}}}}}</span> {{#if:{{{countup|}}}|{{{text|{{{endText|}}}}}}}} | ||
</span>{{#if:{{{countup|}}}|| | </span>{{#if:{{{countup|}}}|| | ||
| Line 9: | Line 9: | ||
* <code>time</code> or <code>[1]</code> : [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse time] to countdown to, required. | * <code>time</code> or <code>[1]</code> : [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse time] to countdown to, required. | ||
* <code>countup</code> : boolean. Timer counts upwards if chosen date has passed. Will override/disregard <code>class</code> & <code>[2]</code>. | * <code>countup</code> : boolean. Timer counts upwards if chosen date has passed. Will override/disregard <code>class</code> & <code>[2]</code>. | ||
| + | * <code>short</code> : boolean. Timer text is changed to single letters, e.g. "Days" becomes "d". | ||
* <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>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>[2]</code> : alternatively, to only specify a number, e.g. <code>2</code> for a second timer. | ** <code>[2]</code> : alternatively, to only specify a number, e.g. <code>2</code> for a second timer. | ||
| Line 28: | Line 29: | ||
</pre> | </pre> | ||
{{Timer|January 19 2038 12:14:07 +0900|3|style = font-weight:bold|text = The time is now!}} | {{Timer|January 19 2038 12:14:07 +0900|3|style = font-weight:bold|text = The time is now!}} | ||
| + | <pre> | ||
| + | {{Timer|January 29 2042 12:17:04 +0900|3|style = font-weight:bold|short=true|text = The time is now short!}} | ||
| + | </pre> | ||
| + | {{Timer|January 29 2042 12:17:04 +0900|3|style = font-weight:bold|short=true|text = The time is now short!}} | ||
==countup Examples== | ==countup Examples== | ||
<pre> | <pre> | ||
| Line 37: | Line 42: | ||
</pre> | </pre> | ||
{{Timer|January 1 1980 00:00:00 +0900|countup=true|style = font-style:italic|text = ago}} | {{Timer|January 1 1980 00:00:00 +0900|countup=true|style = font-style:italic|text = ago}} | ||
| + | <pre> | ||
| + | {{Timer|January 1 1970 00:00:00 +0900|countup=true|style = font-weight:bold|short=true|text = in the past}} | ||
| + | </pre> | ||
| + | {{Timer|January 1 1970 00:00:00 +0900|countup=true|style = font-weight:bold|short=true|text = in the past}} | ||
<pre> | <pre> | ||
{{Timer|January 19 2038 12:14:07 +0900|countup=true|style = font-weight:bold|text =. Still counts down normally for future dates.}} | {{Timer|January 19 2038 12:14:07 +0900|countup=true|style = font-weight:bold|text =. Still counts down normally for future dates.}} | ||
Latest revision as of 14:46, 8 August 2023
Displays a countdown timer.
Parameters
timeor[1]: time to countdown to, required.countup: boolean. Timer counts upwards if chosen date has passed. Will override/disregardclass&[2].short: boolean. Timer text is changed to single letters, e.g. "Days" becomes "d".class: specify when multiple timers are used on the page,countdownComplete1by default, e.g.,countdownComplete2for a second timer, etc.[2]: alternatively, to only specify a number, e.g.2for a second timer.
text: optional completion text,Countdown complete!by default. Used at end of timer text forcountup.style: custom style, optional.extra_style: extra style to add to the default style, optional.
See MediaWiki:Gadget-Countdown.js for JS implementation details.
Examples
{{Timer|January 1 2023 00:00:00 +0900|extra_style = text-align:left}}
{{Timer|January 1 2030 00:00:00 +0900|2|style = font-style:italic|text = Not yet.}}
{{Timer|January 19 2038 12:14:07 +0900|3|style = font-weight:bold|text = The time is now!}}
{{Timer|January 29 2042 12:17:04 +0900|3|style = font-weight:bold|short=true|text = The time is now short!}}
countup Examples
{{Timer|January 1 2020 00:00:00 +0900|countup=true|extra_style = text-align:left}}
{{Timer|January 1 1980 00:00:00 +0900|countup=true|style = font-style:italic|text = ago}}
{{Timer|January 1 1970 00:00:00 +0900|countup=true|style = font-weight:bold|short=true|text = in the past}}
{{Timer|January 19 2038 12:14:07 +0900|countup=true|style = font-weight:bold|text =. Still counts down normally for future dates.}}