源码演示站点：https://qindoc.com/倒计时/

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>国庆节倒计时</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url('https://free-img.mofashi.ltd/5/2025/05/10/681f4656d0db4.jpg') center/cover fixed;
            font-family: Arial, sans-serif;
        }

        .countdown-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }

        .countdown-title {
            color: #fff;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            margin: 0;
            padding: 15px 40px;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(5px);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .countdown-container {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px 50px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            display: flex;
            gap: 40px;
        }

        .time-block {
            text-align: center;
            color: #fff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .number {
            font-size: 3em;
            font-weight: bold;
        }

        .label {
            font-size: 1.2em;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <div class="countdown-wrapper">
        <h1 class="countdown-title">国庆节倒计时</h1>
        <div class="countdown-container">
            <div class="time-block">
                <div class="number" id="days"></div>
                <div class="label">天</div>
            </div>
            <div class="time-block">
                <div class="number" id="hours"></div>
                <div class="label">小时</div>
            </div>
            <div class="time-block">
                <div class="number" id="minutes"></div>
                <div class="label">分钟</div>
            </div>
            <div class="time-block">
                <div class="number" id="seconds"></div>
                <div class="label">秒</div>
            </div>
        </div>
    </div>

    <script>
        function updateCountdown() {
            const targetDate = new Date(new Date().getFullYear(), 9, 1); // 10月1日（月份从0开始）
            if (targetDate < new Date()) {
                targetDate.setFullYear(targetDate.getFullYear() + 1);
            }

            const now = new Date();
            const diff = targetDate - now;

            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);

            document.getElementById('days').textContent = days.toString().padStart(2, '0');
            document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
            document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
            document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
        }

        // 立即执行一次并设置定时器
        updateCountdown();
        setInterval(updateCountdown, 1000);
    </script>
</body>