Spaces:

cacode
/

gkjy

Running

File size: 8,427 Bytes

ef158f3

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2026高考倒计时</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Noto+Sans+SC:wght@300;400&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #00ffff; /* 主题色 - 青色 */
            --glow-color: rgba(0, 255, 255, 0.75);
            --bg-color: #020a1a; /* 深蓝背景色 */
            --text-color: #e0e0e0;
        }

        body {
            margin: 0;
            font-family: 'Noto Sans SC', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden; /* 隐藏溢出，防止背景动画的滚动条 */
            position: relative;
        }

        /* 动态背景 */
        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                radial-gradient(1px 1px at 20px 30px, #eee, rgba(0,0,0,0)),
                radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)),
                radial-gradient(1px 1px at 50px 160px, #ddd, rgba(0,0,0,0)),
                radial-gradient(1px 1px at 90px 40px, #fff, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
            background-repeat: repeat;
            background-size: 200px 200px;
            animation: zoom 15s infinite;
            opacity: 0;
        }

        .stars:nth-child(2) {
            background-position: 100px 100px;
            animation-delay: 3s;
        }

        .stars:nth-child(3) {
            background-position: 50px 50px;
            animation-delay: 5s;
        }

        @keyframes zoom {
            0% {
                opacity: 0;
                transform: scale(0.5) translateY(100%);
            }
            50% {
                opacity: 0.7;
            }
            100% {
                opacity: 0;
                transform: scale(1.5) translateY(-50%);
            }
        }


        .container {
            text-align: center;
            z-index: 1;
            background: rgba(10, 25, 47, 0.6);
            padding: 40px 60px;
            border-radius: 15px;
            border: 1px solid rgba(0, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.15);
        }

        h1 {
            font-size: 3em;
            font-weight: 400;
            color: var(--primary-color);
            margin-bottom: 30px;
            letter-spacing: 4px;
            text-shadow: 
                0 0 5px var(--glow-color),
                0 0 10px var(--glow-color),
                0 0 15px var(--glow-color);
        }

        #timer {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .time-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 15px;
            min-width: 100px;
        }

        .time-box span:first-child {
            font-family: 'Orbitron', sans-serif;
            font-size: 4.5em;
            font-weight: 700;
            color: var(--primary-color);
            line-height: 1;
            text-shadow:
                0 0 5px var(--glow-color),
                0 0 15px var(--glow-color),
                0 0 25px var(--glow-color);
        }

        .time-box span.label {
            font-size: 1.2em;
            margin-top: 10px;
            color: var(--text-color);
            font-weight: 300;
            letter-spacing: 2px;
        }
        
        .motto {
            margin-top: 40px;
            font-size: 1.2em;
            font-style: italic;
            color: #aaa;
            letter-spacing: 1px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 30px;
                margin: 15px;
            }
            h1 {
                font-size: 2em;
            }
            #timer {
                flex-direction: column;
                gap: 5px;
            }
            .time-box {
                flex-direction: row;
                justify-content: space-between;
                align-items: baseline;
                width: 100%;
                padding: 10px 0;
            }
            .time-box span:first-child {
                font-size: 3em;
            }
            .time-box span.label {
                font-size: 1em;
                margin-top: 0;
            }
            .motto {
                font-size: 1em;
            }
        }
    </style>
</head>
<body>

    <div class="stars"></div>
    <div class="stars"></div>
    <div class="stars"></div>

    <div class="container" id="countdown-container">
        <h1 id="title">2026高考倒计时</h1>
        <div id="timer">
            <div class="time-box">
                <span id="days">00</span>
                <span class="label">天</span>
            </div>
            <div class="time-box">
                <span id="hours">00</span>
                <span class="label">时</span>
            </div>
            <div class="time-box">
                <span id="minutes">00</span>
                <span class="label">分</span>
            </div>
            <div class="time-box">
                <span id="seconds">00</span>
                <span class="label">秒</span>
            </div>
        </div>
        <p class="motto">金榜题名，未来可期</p>
    </div>

    <script>
        // 获取DOM元素
        const daysEl = document.getElementById('days');
        const hoursEl = document.getElementById('hours');
        const minutesEl = document.getElementById('minutes');
        const secondsEl = document.getElementById('seconds');
        const titleEl = document.getElementById('title');
        const timerEl = document.getElementById('timer');
        
        function getTargetDate() {
            const now = new Date();
            let targetYear = now.getFullYear();
            
            // 目标日期：6月7日 9:00 AM。月份在JS中是0-11，所以6月是5。
            const targetDate = new Date(targetYear, 5, 7, 9, 0, 0);

            // 如果当前时间已经超过了今年的高考时间，则目标设为明年
            if (now > targetDate) {
                targetYear++;
                targetDate.setFullYear(targetYear);
            }
            
            return targetDate;
        }

        function updateCountdown() {
            const targetDate = getTargetDate();
            const now = new Date().getTime();
            const distance = targetDate - now;

            if (distance <= 0) {
                // 倒计时结束
                clearInterval(countdownInterval);
                titleEl.textContent = "考试加油！";
                timerEl.innerHTML = "<p style='font-size: 2em; color: var(--primary-color);'>祝君凯旋</p>";
                return;
            }

            // 时间计算
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // 更新页面显示，使用padStart来补零
            daysEl.textContent = String(days).padStart(2, '0');
            hoursEl.textContent = String(hours).padStart(2, '0');
            minutesEl.textContent = String(minutes).padStart(2, '0');
            secondsEl.textContent = String(seconds).padStart(2, '0');
        }

        // 立即执行一次，避免页面初始时显示00
        updateCountdown();

        // 每秒更新一次
        const countdownInterval = setInterval(updateCountdown, 1000);
    </script>
</body>
</html>