• 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"

From Kancolle Wiki
Jump to navigation Jump to search
m (noinclude)
(enabling use of hidden "short-format" via "short=")
 
(14 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<noinclude><pre>
+
<includeonly><div style="{{{style|text-align:center;font-size:18px;font-weight:bold;color:red;margin:0px 0px 10px 0px}}};{{{extra_style|}}}">
−
{{Timer
+
<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">
−
|time = January 1 2019 11:00:00 +0900
+
<span class="countdowndate">{{{1|{{{time|}}}}}}</span> {{#if:{{{countup|}}}|{{{text|{{{endText|}}}}}}}}
−
|style = font-weight:bold;
+
</span>{{#if:{{{countup|}}}||
−
|endClass = countdownComplete1
+
<span class="{{{class|{{{endClass|countdownComplete{{{2|1}}}}}}}}}" style="display:none">{{{text|{{{endText|Countdown complete!}}}}}}</span>}}
−
|endText = The time is now!
+
</div></includeonly><noinclude>
−
}}
+
Displays a countdown timer.
−
</pre></noinclude><div style="{{{style|text-align:center; font-size:18px; font-weight:bold; color:#f00; margin:0px 0px 10px 0px;}}}">  
+
==Parameters==
−
<span class="countdown"
+
* <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.
−
data-options="no-leading-zeros"
+
* <code>countup</code> : boolean. Timer counts upwards if chosen date has passed. Will override/disregard <code>class</code> & <code>[2]</code>.
−
data-end="toggle"
+
* <code>short</code> : boolean. Timer text is changed to single letters, e.g. "Days" becomes "d".
−
data-toggle=".{{{endClass|countdownComplete}}}"
+
* <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.
−
style="display:none;">
+
** <code>[2]</code> : alternatively, to only specify a number, e.g. <code>2</code> for a second timer.
−
<span class="countdowndate">{{{time|January 1 2019 11:00:00 +0900}}}</span>
+
* <code>text</code> : optional completion text, <code>Countdown complete!</code> by default. Used at end of timer text for <code>countup</code>.
−
</span>  
+
* <code>style</code> : custom style, optional.
−
<span class="{{{endClass|countdownComplete}}}" style="display:none;">
+
* <code>extra_style</code> : extra style to add to the default style, optional.
−
{{{endText|Countdown complete!}}}
+
See [[MediaWiki:Gadget-Countdown.js]] for JS implementation details.
−
</span>
+
==Examples==
−
</div>
+
<pre>
 +
{{Timer|January 1 2023 00:00:00 +0900|extra_style = text-align:left}}
 +
</pre>
 +
{{Timer|January 1 2023 00:00:00 +0900|extra_style = text-align:left}}
 +
<pre>
 +
{{Timer|January 1 2030 00:00:00 +0900|2|style = font-style:italic|text = Not yet.}}
 +
</pre>
 +
{{Timer|January 1 2030 00:00:00 +0900|2|style = font-style:italic|text = Not yet.}}
 +
<pre>
 +
{{Timer|January 19 2038 12:14:07 +0900|3|style = font-weight:bold|text = The time is now!}}
 +
</pre>
 +
{{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==
 +
<pre>
 +
{{Timer|January 1 2020 00:00:00 +0900|countup=true|extra_style = text-align:left}}
 +
</pre>
 +
{{Timer|January 1 2020 00:00:00 +0900|countup=true|extra_style = text-align:left}}
 +
<pre>
 +
{{Timer|January 1 1980 00:00:00 +0900|countup=true|style = font-style:italic|text = ago}}
 +
</pre>
 +
{{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>
 +
{{Timer|January 19 2038 12:14:07 +0900|countup=true|style = font-weight:bold|text =. Still counts down normally for future dates.}}
 +
</pre>
 +
{{Timer|January 19 2038 12:14:07 +0900|countup=true|style = font-weight:bold|text =. Still counts down normally for future dates.}}
 +
</noinclude>

Latest revision as of 14:46, 8 August 2023

Displays a countdown timer.

Parameters

  • time or [1] : time to countdown to, required.
  • countup : boolean. Timer counts upwards if chosen date has passed. Will override/disregard class & [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, countdownComplete1 by default, e.g., countdownComplete2 for a second timer, etc.
    • [2] : alternatively, to only specify a number, e.g. 2 for a second timer.
  • text : optional completion text, Countdown complete! by default. Used at end of timer text for countup.
  • 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.}}

Retrieved from "https://kcwiki-en.mirairepository.net/w/index.php?title=Template:Timer&oldid=158178"