微件:Countdown：修订间差异

可视化wikitext

2026年5月3日 (日) 15:32的最新版本

这是一个倒计时微件，仅供{{Countdown}}使用。

@@ 第1行： / 第1行： @@
-<noinclude>
-这是一个活动倒计时组件,仅供{{tl|Countdown}}使用。
-</noinclude>
 <includeonly>
-<style>
+<!--{assign var="targetTime" value=$time|default:$t}-->
-    .countdown-timer {
+<span class="custom-countdown"
-        font-family: monospace;
+      data-target="<!--{$targetTime|escape:'quotes'}-->"
-        font-weight: bold;
+      data-before="<!--{$before|default:'$1前'|escape:'quotes'}-->"
-        color: #d33;
+      data-after="<!--{$after|default:'还剩$1'|escape:'quotes'}-->">...</span>
-        background: #f8f9fa;
-        padding: 2px 6px;
-        border-radius: 3px;
-        border: 1px solid #ddd;
-        display: inline-block;
-        min-width: 70px;
-        text-align: center;
-    }
-</style>
-<span class="countdown-timer" data-target="<!--{$target|default:'today-end'|escape:'quotes'}-->">...</span>
 <script>
 (function() {
-     let t = null;
+     let timer = null;
+    function update() {
+        const now = new Date();
+        document.querySelectorAll('.custom-countdown').forEach(el => {
+            let targetStr = el.getAttribute('data-target');
+            const beforeTpl = el.getAttribute('data-before');
+            const afterTpl = el.getAttribute('data-after');
-    function u() {
+            if (!targetStr) return;
-        const n = new Date();
+            if (/^\d{4}$/.test(targetStr)) {
-        document.querySelectorAll('.countdown-timer').forEach(el => {
+                targetStr += "-01-01T00:00:00";
-            const s = el.getAttribute('data-target');
+            }
-             let g = s === 'today-end' ?
+            if (/[+-]\d{2}$/.test(targetStr)) {
-                 new Date(n.getFullYear(), n.getMonth(), n.getDate(), 23, 59, 59) :
+                targetStr += ":00";
-                new Date(s);
+            }
+            if (/T\d{2}([+-]|Z|$)/.test(targetStr)) {
-            const d = g - n;
+                targetStr = targetStr.replace(/(T\d{2})/, "$1:00:00");
+             }
+            if (targetStr === 'today-end') {
+                 targetStr = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59).toISOString();
+             }
-             if (d <= 0) {
+            const target = new Date(targetStr);
-                 el.innerHTML = "Ended";
+             if (isNaN(target)) {
+                 el.innerHTML = '<span style="color:red">时间格式错误 (' + targetStr + ')</span>';
                  return;
              }
-             const h = Math.floor(d / 36e5);
+             const diff = target - now;
-             const m = Math.floor((d % 36e5) / 6e4);
+            const absDiff = Math.abs(diff);
-             const c = Math.floor((d % 6e4) / 1e3);
+            const days = Math.floor(absDiff / 864e5);
+            const hours = Math.floor((absDiff % 864e5) / 36e5);
+             const mins = Math.floor((absDiff % 36e5) / 6e4);
+             const secs = Math.floor((absDiff % 6e4) / 1000);
-             el.innerHTML = [h, m, c].map(v => v < 10 ? "0" + v : v).join(":");
+             let diffStr = "";
+            if (days > 0) diffStr += days + "天";
+            if (hours > 0 || days > 0) diffStr += hours + "小时";
+            if (mins > 0 || hours > 0 || days > 0) diffStr += mins + "分";
+            diffStr += secs + "秒";
+            if (diff > 0) {
+                el.innerHTML = afterTpl.replace('$1', diffStr);
+            } else {
+                el.innerHTML = beforeTpl.replace('$1', diffStr);
+            }
          });
      }
-     function start() {
+     function start() { if(!timer){ update(); timer=setInterval(update, 1000); } }
-        if (!t) {
+     function stop() { clearInterval(timer); timer=null; }
-            u();
+     document.addEventListener('visibilitychange', () => { document.hidden ? stop() : start(); });
-            t = setInterval(u, 1000);
-        }
-    }
-     function stop() {
-        clearInterval(t);
-        t = null;
-    }
-     document.addEventListener('visibilitychange', () => {
-        if (document.hidden) {
-            stop();
-        } else {
-            start();
-        }
-    });
      start();
 })();
 </script>
-</includeonly>
+</includeonly><noinclude>
+这是一个倒计时微件，仅供{{tl|Countdown}}使用。
+</noinclude>