Timer Link

https://ithelp.ithome.com.tw/questions/10206698

HTML

<a data-href="https://ithelp.ithome.com.tw/questions/10206698" data-limit="10">等待 10 秒</a>
<a data-href="https://ithelp.ithome.com.tw/questions/10206698" data-limit="20">等待 20 秒</a>
<a data-href="https://ithelp.ithome.com.tw/questions/10206698" data-limit="30">等待 30 秒</a>

CSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	font-size: 16px;
}

body {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

a {
	min-width: 5rem;
	display: inline-block;
	background-color: #3264c8;
	border-radius: 0.25rem;
	color: #fff;
	text-align: center;
	text-decoration: none;
	margin: 0.5rem;
	padding: 0.5rem 1rem;
}

a[data-start] {
	background-color: #c83232;
}

a[data-start][href] {
	background-color: #00af96;
}

JavaScript

window.addEventListener('click', click);

function click(e) {
	const el = e.target;
	if (el.tagName !== 'A' || !el.dataset.limit) return;
	if (el.dataset.start && !el.dataset.pause) {
		el.dataset.pause = (+el.dataset.limit) - Math.floor(new Date().getTime() / 1000) + (+el.dataset.start);
		return;
	}
	if (el.dataset.pause) {
		el.dataset.limit = el.dataset.pause;
		delete el.dataset.start;
		delete el.dataset.pause;
	}
	count(el);
}

function count(el) {
	if (el.dataset.pause) return;
	const now = Math.floor(new Date().getTime() / 1000);
	el.dataset.start = el.dataset.start || now;
	const start = +el.dataset.start;
	const limit = +el.dataset.limit;
	if (now >= start + limit) {
		el.href = el.dataset.href;
		el.textContent = '就緒';
		return;
	}
	const sur = limit - now + start;
	const min = ('0' + Math.floor(sur / 60)).slice(-2);
	const sec = ('0' + sur % 60).slice(-2);
	el.textContent = `${min}:${sec}`;
	setTimeout(count, 1000, el);
}