模板:Timer：修订间差异

帮助

2024年6月22日 (六) 16:49的最新版本

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.

Examples

{{Timer|January 1 2023 00:00:00 +0900|extra_style = text-align:left}}

January 1 2023 00:00:00 +0900 Countdown complete!

{{Timer|January 1 2030 00:00:00 +0900|2|style = font-style:italic|text = Not yet.}}

January 1 2030 00:00:00 +0900 Not yet.

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

January 19 2038 12:14:07 +0900 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!}}

January 29 2042 12:17:04 +0900 The time is now short!

countup Examples

{{Timer|January 1 2020 00:00:00 +0900|countup=true|extra_style = text-align:left}}

January 1 2020 00:00:00 +0900

{{Timer|January 1 1980 00:00:00 +0900|countup=true|style = font-style:italic|text = ago}}

January 1 1980 00:00:00 +0900 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.}}

@@ 第1行： / 第1行： @@
-<div id="countdown-container" data-endtime="{{{endtime}}}">
+<includeonly><div style="{{{style|text-align:center;font-size:18px;font-weight:bold;color:red;margin:0px 0px 10px 0px}}};{{{extra_style|}}}">
-  <span id="countdown"></span>
+{{#if:{{{head|}}}|<span>{{{head}}}</span>}}<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">
-</div>
+<span class="countdowndate">{{{1|{{{time|}}}}}}</span> {{#if:{{{countup|}}}|{{{text|{{{endText|}}}}}}}}
+</span>{{#if:{{{countup|}}}||
-<script>
+<span class="{{{class|{{{endClass|countdownComplete{{{2|1}}}}}}}}}" style="display:none">{{{text|{{{endText|Countdown complete!}}}}}}</span>}}
-(function() {
+</div></includeonly><noinclude>
-  var container = document.getElementById('countdown-container');
+Displays a countdown timer.
-  if (!container) return;
+==Parameters==
+* <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.
-  var endTime = container.getAttribute('data-endtime');
+* <code>countup</code> : boolean. Timer counts upwards if chosen date has passed. Will override/disregard <code>class</code> & <code>[2]</code>.
-  var countdownElement = document.getElementById('countdown');
+* <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.
-  function updateCountdown() {
+** <code>[2]</code> : alternatively, to only specify a number, e.g. <code>2</code> for a second timer.
-    var now = new Date().getTime();
+* <code>text</code> : optional completion text, <code>Countdown complete!</code> by default. Used at end of timer text for <code>countup</code>.
-    var endDate = new Date(endTime).getTime();
+* <code>style</code> : custom style, optional.
-    var distance = endDate - now;
+* <code>extra_style</code> : extra style to add to the default style, optional.
+==Examples==
-    if (distance < 0) {
+<pre>
-      countdownElement.innerHTML = "Countdown finished";
+{{Timer|January 1 2023 00:00:00 +0900|extra_style = text-align:left}}
-      clearInterval(interval);
+</pre>
-      return;
+{{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.}}
-    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+</pre>
-    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+{{Timer|January 1 2030 00:00:00 +0900|2|style = font-style:italic|text = Not yet.}}
-    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+<pre>
-    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+{{Timer|January 19 2038 12:14:07 +0900|3|style = font-weight:bold|text = The time is now!}}
+</pre>
-    countdownElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
+{{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!}}
-  var interval = setInterval(updateCountdown, 1000);
+</pre>
-  updateCountdown();
+{{Timer|January 29 2042 12:17:04 +0900|3|style = font-weight:bold|short=true|text = The time is now short!}}
-})();
+==countup Examples==
-</script>
+<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>