Countdown Clock
<section class="p-6 max-w-md mx-auto">
<!-- 时钟表盘风格倒计时组件 -->
<div class="flex flex-col items-center bg-gradient-to-b from-gray-50 to-gray-100 p-8 rounded-2xl shadow-lg border border-gray-200">
<h3 class="text-xl font-bold text-gray-700 mb-6">Time Remaining</h3>
<!-- 时钟表盘 -->
<div class="relative w-72 h-72 rounded-full border-[14px] border-gray-300 bg-white shadow-xl flex items-center justify-center">
<!-- 时钟刻度 -->
<div class="absolute inset-0 w-full h-full">
<!-- 主要刻度 (12个) -->
<div class="absolute top-4 left-1/2 h-4 w-1.5 -ml-0.75 bg-gray-600 rounded-full"></div>
<div class="absolute top-1/2 right-4 w-4 h-1.5 -mt-0.75 bg-gray-600 rounded-full"></div>
<div class="absolute bottom-4 left-1/2 h-4 w-1.5 -ml-0.75 bg-gray-600 rounded-full"></div>
<div class="absolute top-1/2 left-4 w-4 h-1.5 -mt-0.75 bg-gray-600 rounded-full"></div>
<!-- 对角线刻度 -->
<div class="absolute top-[15%] right-[15%] h-3 w-1.5 bg-gray-600 rounded-full origin-bottom-left rotate-45"></div>
<div class="absolute bottom-[15%] right-[15%] h-3 w-1.5 bg-gray-600 rounded-full origin-top-left rotate-[135deg]"></div>
<div class="absolute bottom-[15%] left-[15%] h-3 w-1.5 bg-gray-600 rounded-full origin-top-right rotate-45"></div>
<div class="absolute top-[15%] left-[15%] h-3 w-1.5 bg-gray-600 rounded-full origin-bottom-right rotate-[135deg]"></div>
<!-- 次要刻度 -->
<div class="absolute top-[8%] left-[30%] h-2 w-1 bg-gray-400 rounded-full"></div>
<div class="absolute top-[8%] right-[30%] h-2 w-1 bg-gray-400 rounded-full"></div>
<div class="absolute bottom-[8%] left-[30%] h-2 w-1 bg-gray-400 rounded-full"></div>
<div class="absolute bottom-[8%] right-[30%] h-2 w-1 bg-gray-400 rounded-full"></div>
<div class="absolute top-[30%] left-[8%] w-2 h-1 bg-gray-400 rounded-full"></div>
<div class="absolute top-[30%] right-[8%] w-2 h-1 bg-gray-400 rounded-full"></div>
<div class="absolute bottom-[30%] left-[8%] w-2 h-1 bg-gray-400 rounded-full"></div>
<div class="absolute bottom-[30%] right-[8%] w-2 h-1 bg-gray-400 rounded-full"></div>
</div>
<!-- 钟面中心点 -->
<div class="absolute w-6 h-6 rounded-full bg-gray-700 z-20 shadow-md"></div>
<div class="absolute w-2 h-2 rounded-full bg-white z-30"></div>
<!-- 时针（短） -->
<div id="hours-hand" class="absolute w-2 h-20 bg-gray-800 rounded-full origin-bottom transition-transform duration-1000 ease-linear" style="transform: rotate(120deg); transform-origin: center bottom; bottom: 50%; z-index: 10;"></div>
<!-- 分针（中） -->
<div id="minutes-hand" class="absolute w-1.5 h-28 bg-blue-600 rounded-full origin-bottom transition-transform duration-1000 ease-linear" style="transform: rotate(210deg); transform-origin: center bottom; bottom: 50%; z-index: 10;"></div>
<!-- 秒针（长细） -->
<div id="seconds-hand" class="absolute w-1 h-32 bg-red-500 rounded-full origin-bottom transition-transform duration-100 ease-linear" style="transform: rotate(310deg); transform-origin: center bottom; bottom: 50%; z-index: 15;"></div>
<!-- 装饰环 -->
<div class="absolute w-10 h-10 rounded-full border-2 border-gray-200 z-5"></div>
</div>
<!-- 数字显示 -->
<div class="mt-8 p-4 bg-white rounded-xl shadow-md border border-gray-200">
<div class="font-mono text-2xl flex items-center justify-center space-x-2 text-gray-800">
<span id="clock-hours" class="tabular-nums bg-gray-100 px-3 py-1 rounded-md">02</span>
<span class="text-gray-400">:</span>
<span id="clock-minutes" class="tabular-nums bg-gray-100 px-3 py-1 rounded-md">15</span>
<span class="text-gray-400">:</span>
<span id="clock-seconds" class="tabular-nums bg-gray-100 px-3 py-1 rounded-md">45</span>
</div>
</div>
</div>
<script>
// 工具函数：获取两个日期之间的时间差（毫秒）
function getTimeRemaining(endtime) {
const total = Date.parse(endtime) - Date.now();
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
const days = Math.floor(total / (1000 * 60 * 60 * 24));
return {
total,
days,
hours,
minutes,
seconds
};
}
// 格式化数字为两位数（补零）
function formatNumber(num) {
return num < 10 ? `0${num}` : num;
}
// 时钟表盘倒计时初始化
function initClockCountdown(endtime) {
const hoursHand = document.getElementById('hours-hand');
const minutesHand = document.getElementById('minutes-hand');
const secondsHand = document.getElementById('seconds-hand');
const hoursElement = document.getElementById('clock-hours');
const minutesElement = document.getElementById('clock-minutes');
const secondsElement = document.getElementById('clock-seconds');
function updateClock() {
const t = getTimeRemaining(endtime);
// 更新数字显示
if (hoursElement) hoursElement.textContent = formatNumber(t.hours);
if (minutesElement) minutesElement.textContent = formatNumber(t.minutes);
if (secondsElement) secondsElement.textContent = formatNumber(t.seconds);
// 更新指针旋转角度
if (hoursHand) {
const hoursDegrees = (t.hours / 12) * 360;
hoursHand.style.transform = `rotate(${hoursDegrees}deg)`;
}
if (minutesHand) {
const minutesDegrees = (t.minutes / 60) * 360;
minutesHand.style.transform = `rotate(${minutesDegrees}deg)`;
}
if (secondsHand) {
const secondsDegrees = (t.seconds / 60) * 360;
secondsHand.style.transform = `rotate(${secondsDegrees}deg)`;
}
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
const timeinterval = setInterval(updateClock, 1000);
return timeinterval;
}
// 设置倒计时结束时间（当前时间 + 3小时）
const deadline = new Date();
deadline.setHours(deadline.getHours() + 3);
// 初始化时钟表盘倒计时
initClockCountdown(deadline);
</script>
</section>
Copied to clipboard