• 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
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}}}">
 +
<span class="countdown" data-options="no-leading-zeros" data-end="toggle" data-toggle=".{{{endClass|countdownComplete}}}" style="display:none">
 +
<span class="countdowndate">{{{time|}}}</span>
 +
</span>
 +
<span class="{{{endClass|countdownComplete}}}" style="display:none">{{{endText|Countdown complete!}}}</span>
 +
</div></includeonly><noinclude>
 +
==Parameters==
 +
* <code>time</code> : time to countdown to, required.
 +
* <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>endText</code> : optional completion text, <code>Countdown complete!</code> by default.
 +
See [[MediaWiki:Gadget-Countdown.js]] for JS implementation details.
 +
==Examples==
 +
{{Timer
 +
|time = January 1 2025 00:00:00 +0900
 +
|style = font-weight:italic
 +
|endClass = countdownComplete1
 +
|endText = Not yet.
 +
}}
 +
</pre>
 +
{{Timer
 +
|time = January 1 2025 00:00:00 +0900
 +
|style = font-weight:italic
 +
|endClass = countdownComplete1
 +
|endText = Not yet.
 +
}}
 +
<pre>
 
{{Timer
 
{{Timer
 
|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 = countdownComplete1
+
|endClass = countdownComplete2
 
|endText = The time is now!
 
|endText = The time is now!
 
}}
 
}}
Line 9: Line 35:
 
{{Timer
 
{{Timer
 
|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
 
|endClass = countdownComplete2
 
|endText = The time is now!
 
|endText = The time is now!
 
}}
 
}}
</noinclude><div style="{{{style|text-align:center; font-size:18px; font-weight:bold; color:#f00; margin:0px 0px 10px 0px;}}}">
+
</noinclude>
<span class="countdown"
 
data-options="no-leading-zeros"
 
data-end="toggle"
 
data-toggle=".{{{endClass|countdownComplete}}}"
 
style="display:none;">
 
<span class="countdowndate">{{{time|January 1 2019 11:00:00 +0900}}}</span>
 
</span>
 
<span class="{{{endClass|countdownComplete}}}" style="display:none;">
 
{{{endText|Countdown complete!}}}
 
</span>
 
</div>
 

Revision as of 09:00, 1 May 2021

Parameters

  • time : time to countdown to, required.
  • style : custom style, optional.
  • endClass : specify when multiple timers are used on the page, countdownComplete by default, e.g., countdownComplete2 for a second timer, etc.
  • endText : optional completion text, Countdown complete! by default.

See MediaWiki:Gadget-Countdown.js for JS implementation details.

Examples

{{Timer
|time = January 19 2038 12:14:07 +0900
|style = font-weight:bold
|endClass = countdownComplete2
|endText = The time is now!
}}