Widget:Countdown - 版本历史

2026年5月3日 (日) 07:32 弃权者

2026-05-03T07:32:13Z

←上一版本		2026年5月3日 (日) 15:32的版本
第25行：		第25行：
	if (/T\d{2}([+-]\|Z\|$)/.test(targetStr)) {		if (/T\d{2}([+-]\|Z\|$)/.test(targetStr)) {
	targetStr = targetStr.replace(/(T\d{2})/, "$1:00:00");		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();
	}		}

2026年5月3日 (日) 07:30 弃权者

2026-05-03T07:30:14Z

←上一版本		2026年5月3日 (日) 15:30的版本
第12行：		第12行：
	const now = new Date();		const now = new Date();
	document.querySelectorAll('.custom-countdown').forEach(el => {		document.querySelectorAll('.custom-countdown').forEach(el => {
	~~const~~ targetStr = el.getAttribute('data-target');		let targetStr = el.getAttribute('data-target');
	const beforeTpl = el.getAttribute('data-before');		const beforeTpl = el.getAttribute('data-before');
	const afterTpl = el.getAttribute('data-after');		const afterTpl = el.getAttribute('data-after');

	if (!targetStr) return;		if (!targetStr) return;
			if (/^\d{4}$/.test(targetStr)) {
			targetStr += "-01-01T00:00:00";
			}
			if (/[+-]\d{2}$/.test(targetStr)) {
			targetStr += ":00";
			}
			if (/T\d{2}([+-]\|Z\|$)/.test(targetStr)) {
			targetStr = targetStr.replace(/(T\d{2})/, "$1:00:00");
			}

	~~const finalTargetStr = /^\d{4}$/.test(targetStr) ? targetStr + "-01-01T00:00:00" : targetStr;~~		const target = new Date(targetStr);
	const target = new Date(~~finalTargetStr~~);

	if (isNaN(target)) {		if (isNaN(target)) {
	el.innerHTML = '<span style="color:red">时间格式错误</span>';		el.innerHTML = '<span style="color:red">时间格式错误 (' + targetStr + ')</span>';
	return;		return;
	}		}

2026年5月3日 (日) 07:28 弃权者

2026-05-03T07:28:50Z

←上一版本		2026年5月3日 (日) 15:28的版本
第1行：		第1行：
	<includeonly>		<includeonly>
			<!--{assign var="targetTime" value=$time\|default:$t}-->
	<span class="custom-countdown"		<span class="custom-countdown"
	data-target="<!--{$~~time\|default:$1~~\|escape:'quotes'}-->"		data-target="<!--{$targetTime\|escape:'quotes'}-->"
	data-before="<!--{$before\|default:'$1前'}-->"		data-before="<!--{$before\|default:'$1前'\|escape:'quotes'}-->"
	data-after="<!--{$after\|default:'还剩$1'}-->">...</span>		data-after="<!--{$after\|default:'还剩$1'\|escape:'quotes'}-->">...</span>

	<script>		<script>
	(function() {		(function() {
	let t = null;		let timer = null;
	function u() {		function update() {
	const now = new Date();		const now = new Date();
	document.querySelectorAll('.custom-countdown').forEach(el => {		document.querySelectorAll('.custom-countdown').forEach(el => {
第15行：		第16行：
	const afterTpl = el.getAttribute('data-after');		const afterTpl = el.getAttribute('data-after');

			if (!targetStr) return;

	const finalTargetStr = /^\d{4}$/.test(targetStr) ? targetStr + "-01-01T00:00:00" : targetStr;		const finalTargetStr = /^\d{4}$/.test(targetStr) ? targetStr + "-01-01T00:00:00" : targetStr;
	const target = new Date(finalTargetStr);		const target = new Date(finalTargetStr);
第26行：		第29行：
	const absDiff = Math.abs(diff);		const absDiff = Math.abs(diff);

	~~// 计算时间差值字符串~~
	const days = Math.floor(absDiff / 864e5);		const days = Math.floor(absDiff / 864e5);
	const hours = Math.floor((absDiff % 864e5) / 36e5);		const hours = Math.floor((absDiff % 864e5) / 36e5);
第46行：		第48行：
	}		}

	function start() { if(!t){ u(); t=setInterval(u, 1000); } }		function start() { if(!timer){ update(); timer=setInterval(update, 1000); } }
	function stop() { clearInterval(t); t=null; }		function stop() { clearInterval(timer); timer=null; }
	document.addEventListener('visibilitychange', () => { document.hidden ? stop() : start(); });		document.addEventListener('visibilitychange', () => { document.hidden ? stop() : start(); });
	start();		start();

2026年5月3日 (日) 07:27 弃权者

2026-05-03T07:27:13Z

←上一版本		2026年5月3日 (日) 15:27的版本
第15行：		第15行：
	const afterTpl = el.getAttribute('data-after');		const afterTpl = el.getAttribute('data-after');

	~~// 处理仅年份的情况，补全为 YYYY-01-01~~
	const finalTargetStr = /^\d{4}$/.test(targetStr) ? targetStr + "-01-01T00:00:00" : targetStr;		const finalTargetStr = /^\d{4}$/.test(targetStr) ? targetStr + "-01-01T00:00:00" : targetStr;
	const target = new Date(finalTargetStr);		const target = new Date(finalTargetStr);
第39行：		第38行：
	diffStr += secs + "秒";		diffStr += secs + "秒";

	~~// 根据时间正负应用模板~~
	if (diff > 0) {		if (diff > 0) {
	el.innerHTML = afterTpl.replace('$1', diffStr);		el.innerHTML = afterTpl.replace('$1', diffStr);

2026年5月3日 (日) 07:26 弃权者

2026-05-03T07:26:56Z

←上一版本		2026年5月3日 (日) 15:26的版本
第1行：		第1行：
	~~<noinclude>~~

	~~这是一个活动倒计时组件,仅供{{tl\|Countdown}}使用。~~
	~~{{#widget:Countdown\|target=today-end}}~~

	~~</noinclude>~~
	<includeonly>		<includeonly>
			<span class="custom-countdown"
	<span class="countdown~~-timer~~" data-target="<!--{$~~target~~\|default:'~~today~~-~~end~~'\|~~escape~~:'~~quotes~~'}-->">...</span>		data-target="<!--{$time\|default:$1\|escape:'quotes'}-->"
			data-before="<!--{$before\|default:'$1前'}-->"
			data-after="<!--{$after\|default:'还剩$1'}-->">...</span>

	<script>		<script>
	(function() {		(function() {
	let t = null;		let t = null;

	function u() {		function u() {
	const n = new Date();		const now = new Date();
	document.querySelectorAll('.countdown~~-timer~~').forEach(el => {		document.querySelectorAll('.custom-countdown').forEach(el => {
	const s = el.getAttribute('data-target');		const targetStr = el.getAttribute('data-target');
	~~let g = s ==~~= '~~today~~-~~end~~' ?		const beforeTpl = el.getAttribute('data-before');
	~~new Date(n~~.~~getFullYear~~()~~, n~~.~~getMonth~~()~~, n.getDate(), 23, 59, 59)~~ :		const afterTpl = el.getAttribute('data-after');
	new Date(s);
			// 处理仅年份的情况，补全为 YYYY-01-01
			const finalTargetStr = /^\d{4}$/.test(targetStr) ? targetStr + "-01-01T00:00:00" : targetStr;
			const target = new Date(finalTargetStr);

	~~const d = g - n;~~		if (isNaN(target)) {
			el.innerHTML = '<span style="color:red">时间格式错误</span>';
	if (~~d <= 0~~) {
	el.innerHTML = "~~Ended~~";
	return;		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(!t){ u(); t=setInterval(u, 1000); } }
	if (!t) {		function stop() { clearInterval(t); t=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();		start();
	})();		})();
	</script>		</script>
	</includeonly>		</includeonly><noinclude>
			这是一个倒计时微件，仅供{{tl\|Countdown}}使用。
			</noinclude>

2026年5月3日 (日) 07:18 弃权者

2026-05-03T07:18:55Z

←上一版本		2026年5月3日 (日) 15:18的版本
第2行：		第2行：

	这是一个活动倒计时组件,仅供{{tl\|Countdown}}使用。		这是一个活动倒计时组件,仅供{{tl\|Countdown}}使用。
			{{#widget:Countdown\|target=today-end}}

	</noinclude>		</noinclude>
	<includeonly>		<includeonly>
	~~<style>~~
	~~.countdown-timer {~~
	~~font-family: monospace;~~
	~~font-weight: bold;~~
	~~color: #d33;~~
	~~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>		<span class="countdown-timer" data-target="<!--{$target\|default:'today-end'\|escape:'quotes'}-->">...</span>

弃权者：创建页面，内容为“ 这是一个活动倒计时组件,仅供{{tl|Countdown}}使用。
2026-05-03T07:14:07Z

创建页面，内容为“<noinclude> 这是一个活动倒计时组件,仅供{{tl|Countdown}}使用。 </noinclude> <includeonly> <style> .countdown-timer { font-family: monospace; font-weight: bold; color: #d33; 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" da…”

新页面
<noinclude>

这是一个活动倒计时组件,仅供{{tl|Countdown}}使用。

</noinclude>
<includeonly>
<style>
.countdown-timer {
font-family: monospace;
font-weight: bold;
color: #d33;
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="">...</span>

<script>
(function() {
let t = null;

function u() {
const n = new Date();
document.querySelectorAll('.countdown-timer').forEach(el => {
const s = el.getAttribute('data-target');
let g = s === 'today-end' ?
new Date(n.getFullYear(), n.getMonth(), n.getDate(), 23, 59, 59) :
new Date(s);

const d = g - n;

if (d <= 0) {
el.innerHTML = "Ended";
return;
}

const h = Math.floor(d / 36e5);
const m = Math.floor((d % 36e5) / 6e4);
const c = Math.floor((d % 6e4) / 1e3);

el.innerHTML = [h, m, c].map(v => v < 10 ? "0" + v : v).join(":");
});
}

function start() {
if (!t) {
u();
t = setInterval(u, 1000);
}
}

function stop() {
clearInterval(t);
t = null;
}
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
stop();
} else {
start();
}
});

start();
})();
</script>
</includeonly>