Countdown Basic

                    <section class="p-6 max-w-md mx-auto">
  <!-- 基础倒计时组件 -->
  <div class="flex items-center justify-center bg-gradient-to-r from-gray-50 to-gray-100 border border-gray-200 rounded-xl p-6 shadow-md">
    <div class="flex items-end space-x-4">
      <!-- 小时 -->
      <div class="text-center">
        <div class="bg-white w-20 h-24 rounded-lg shadow-inner border border-gray-100 flex items-center justify-center mb-2">
          <span id="hours" class="countdown font-mono text-5xl font-bold text-gray-800 tabular-nums">04</span>
        </div>
        <div class="text-sm text-gray-600 font-medium uppercase tracking-wide">hours</div>
      </div>
      
      <!-- 分隔符 -->
      <div class="text-3xl text-gray-400 font-light mb-8">:</div>
      
      <!-- 分钟 -->
      <div class="text-center">
        <div class="bg-white w-20 h-24 rounded-lg shadow-inner border border-gray-100 flex items-center justify-center mb-2">
          <span id="minutes" class="countdown font-mono text-5xl font-bold text-gray-800 tabular-nums">24</span>
        </div>
        <div class="text-sm text-gray-600 font-medium uppercase tracking-wide">min</div>
      </div>
      
      <!-- 分隔符 -->
      <div class="text-3xl text-gray-400 font-light mb-8">:</div>
      
      <!-- 秒钟 -->
      <div class="text-center">
        <div class="bg-white w-20 h-24 rounded-lg shadow-inner border border-gray-100 flex items-center justify-center mb-2">
          <span id="seconds" class="countdown font-mono text-5xl font-bold text-gray-800 tabular-nums">36</span>
        </div>
        <div class="text-sm text-gray-600 font-medium uppercase tracking-wide">sec</div>
      </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 initBasicCountdown(endtime) {
      const hoursElement = document.getElementById('hours');
      const minutesElement = document.getElementById('minutes');
      const secondsElement = document.getElementById('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 (t.total <= 0) {
          clearInterval(timeinterval);
        }
      }
      
      updateClock();
      const timeinterval = setInterval(updateClock, 1000);
      return timeinterval;
    }

    // 设置倒计时结束时间（当前时间 + 5小时）
    const deadline = new Date();
    deadline.setHours(deadline.getHours() + 5);
    
    // 初始化基础倒计时
    initBasicCountdown(deadline);
  </script>
</section>