<section class="p-6 max-w-3xl mx-auto">
<!-- 完整界面倒计时组件 -->
<div class="bg-white rounded-xl shadow-xl overflow-hidden">
<!-- 顶部条幅 -->
<div class="bg-gradient-to-r from-blue-600 to-indigo-700 p-4 text-white text-center">
<p class="text-sm font-medium">Special launch offer - Limited spots available!</p>
</div>
<div class="grid md:grid-cols-2 gap-6 p-6">
<!-- 左侧内容：事件信息 -->
<div class="space-y-4">
<div class="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-semibold">
WEBINAR
</div>
<h2 class="text-2xl font-bold text-gray-800">Advanced Web Development Techniques for 2023</h2>
<p class="text-gray-600">Join us for an exclusive webinar where industry experts will share cutting-edge techniques and best practices for modern web development.</p>
<div class="flex items-center text-gray-500 text-sm space-x-4">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span id="event-date">December 10, 2023</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span id="event-time">1:00 PM EST</span>
</div>
</div>
<div class="pt-4">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors">
Reserve Your Spot
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</a>
</div>
</div>
<!-- 右侧内容：倒计时 -->
<div class="flex flex-col justify-center bg-gray-50 p-6 rounded-lg">
<h3 class="text-lg font-medium text-gray-700 mb-2 text-center">Registration Closes In</h3>
<div class="grid grid-cols-4 gap-2 mb-6">
<!-- 天数 -->
<div class="flex flex-col items-center">
<div class="w-full bg-white border border-gray-200 rounded p-2 shadow-sm">
<span id="interface-days" class="text-2xl md:text-3xl font-bold text-gray-800 block text-center tabular-nums">05</span>
</div>
<span class="text-xs mt-1 text-gray-500">DAYS</span>
</div>
<!-- 小时 -->
<div class="flex flex-col items-center">
<div class="w-full bg-white border border-gray-200 rounded p-2 shadow-sm">
<span id="interface-hours" class="text-2xl md:text-3xl font-bold text-gray-800 block text-center tabular-nums">18</span>
</div>
<span class="text-xs mt-1 text-gray-500">HOURS</span>
</div>
<!-- 分钟 -->
<div class="flex flex-col items-center">
<div class="w-full bg-white border border-gray-200 rounded p-2 shadow-sm">
<span id="interface-minutes" class="text-2xl md:text-3xl font-bold text-gray-800 block text-center tabular-nums">54</span>
</div>
<span class="text-xs mt-1 text-gray-500">MINS</span>
</div>
<!-- 秒钟 -->
<div class="flex flex-col items-center">
<div class="w-full bg-white border border-gray-200 rounded p-2 shadow-sm">
<span id="interface-seconds" class="text-2xl md:text-3xl font-bold text-gray-800 block text-center tabular-nums">22</span>
</div>
<span class="text-xs mt-1 text-gray-500">SECS</span>
</div>
</div>
<div class="bg-amber-100 p-3 rounded-lg border border-amber-200">
<div class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-500 mt-0.5 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p class="text-sm text-amber-800">Only <span id="spots-remaining" class="font-bold">25 spots</span> remaining. Reserve yours before they're gone!</p>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="border-t border-gray-200 bg-gray-50 p-4 flex justify-between items-center">
<div class="flex items-center space-x-1 text-gray-500 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
<span>Secure registration</span>
</div>
<div class="space-x-2">
<a href="#" class="text-sm text-gray-600 hover:text-gray-900">Terms</a>
<span class="text-gray-300">|</span>
<a href="#" class="text-sm text-gray-600 hover:text-gray-900">Privacy</a>
</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 initInterfaceCountdown(endtime) {
const daysElement = document.getElementById('interface-days');
const hoursElement = document.getElementById('interface-hours');
const minutesElement = document.getElementById('interface-minutes');
const secondsElement = document.getElementById('interface-seconds');
function updateClock() {
const t = getTimeRemaining(endtime);
if (daysElement) daysElement.textContent = formatNumber(t.days);
if (hoursElement) hoursElement.textContent = formatNumber(t.hours);
if (minutesElement) minutesElement.textContent = formatNumber(t.minutes);
if (secondsElement) secondsElement.textContent = formatNumber(t.seconds);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
const timeinterval = setInterval(updateClock, 1000);
return timeinterval;
}
// 设置事件日期（当前日期 + 6天 + 随机小时）
const eventDate = new Date();
eventDate.setDate(eventDate.getDate() + 6);
eventDate.setHours(Math.floor(Math.random() * 8) + 9); // 9AM - 5PM
eventDate.setMinutes(0);
eventDate.setSeconds(0);
// 设置倒计时结束日期（事件日期前一天）
const deadline = new Date(eventDate);
deadline.setDate(deadline.getDate() - 1);
// 更新事件信息显示
const eventDateElement = document.getElementById('event-date');
const eventTimeElement = document.getElementById('event-time');
if (eventDateElement) {
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
eventDateElement.textContent = eventDate.toLocaleDateString('en-US', dateOptions);
}
if (eventTimeElement) {
const timeOptions = { hour: 'numeric', minute: '2-digit', hour12: true, timeZoneName: 'short' };
eventTimeElement.textContent = eventDate.toLocaleTimeString('en-US', timeOptions);
}
// 随机更新剩余名额
const spotsRemainingElement = document.getElementById('spots-remaining');
if (spotsRemainingElement) {
const remainingSpots = Math.floor(Math.random() * 20) + 5; // 5-25 spots
spotsRemainingElement.textContent = `${remainingSpots} spots`;
// 如果名额少于10，添加紧急感
if (remainingSpots < 10) {
spotsRemainingElement.classList.add('text-red-600');
}
}
// 初始化完整界面倒计时
initInterfaceCountdown(deadline);
</script>
</section>