倒计时解锁跳转单页源码（极简黑白风）

2026年4月9日源码余生只赴山河

起因是想给对象生日一个惊喜，于是就着AI写了这个单页。

特别鸣谢：豆包、千问、智谱清言

这个页面采用了纯黑白灰的配色方案，自带日夜模式自动切换（早上6点切换），并且设计了一个“解锁”机制。

功能亮点：

极简美学：纯黑白灰配色，无多余装饰。
智能日夜：根据本地时间自动在6:00切换白天/黑夜模式，也支持手动点击切换。
动态解锁：倒计时结束后，按钮由“未解锁”变为“已解锁”，点击跳转至生日贺卡页。
礼花特效：仅在某日当天显示“礼花”和“今天！”字样。
完全自适应：适配手机、平板和PC端。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            transition: all 0.3s ease;
        }

        :root {
            --bg: #ffffff;
            --text: #222222;
            --card: #f5f5f5;
            --btn-disabled: #cccccc;
            --btn-active: #222222;
        }

        [data-theme="dark"] {
            --bg: #121212;
            --text: #e0e0e0;
            --card: #1a1a1a;
            --btn-disabled: #333333;
            --btn-active: #e0e0e0;
        }

        body {
            font-family: "PingFang SC", "Helvetica Neue", sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        /* 日夜切换图标按钮 */
        #themeToggle {
            position: absolute;
            top: 24px;
            left: 24px;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid var(--text);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: transparent;
        }

        #themeToggle svg {
            width: 20px;
            height: 20px;
            fill: var(--text);
        }

        .sun-icon, .moon-icon {
            display: none;
        }

        [data-theme="light"] .sun-icon {
            display: block;
        }

        [data-theme="dark"] .moon-icon {
            display: block;
        }

        /* 中间卡片 */
        .card {
            background: var(--card);
            border-radius: 12px;
            padding: 40px 28px;
            text-align: center;
            width: 100%;
            max-width: 360px;
            animation: fadeIn 0.6s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 距离已解锁提示 */
        .countdown-label {
            font-size: 16px;
            font-weight: 400;
            margin-bottom: 10px;
            white-space: nowrap;
            color: var(--text);
            opacity: 0.7;
        }

        /* 倒计时 */
        .countdown {
            font-size: 22px;
            font-weight: 400;
            margin-bottom: 26px;
            white-space: nowrap;
        }

        /* 生日当天礼花效果 */
        .birthday-greeting {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .fireworks-icon {
            width: 40px;
            height: 40px;
            fill: #ff4444;
            margin-bottom: 10px;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        /* 解锁按钮 */
        .unlock-btn {
            width: 150px;
            height: 42px;
            border-radius: 21px;
            border: none;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
        }

        .unlock-btn:disabled {
            background: var(--btn-disabled);
            color: #999;
            cursor: not-allowed;
        }

        .unlock-btn:not(:disabled) {
            background: var(--btn-active);
            color: var(--bg);
        }

        /* 页脚 */
        footer {
            margin-top: 28px;
            font-size: 12px;
            opacity: 0.5;
            text-align: center;
        }

        footer a {
            color: var(--text);
            text-decoration: none;
        }

        @media (max-width: 480px) {
            .card {
                padding: 32px 20px;
            }
            .countdown {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>

<!-- 你指定的SVG日夜切换按钮 -->
<div id="themeToggle" class="theme-toggle" title="切换日夜模式">
    <svg class="sun-icon" viewBox="0 0 24 24">
        <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 00-1.41 0 .996.996 0 000 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 00-1.41 0 .996.996 0 000 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 000-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 000-1.41.996.996 0 00-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 000-1.41.996.996 0 00-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
    </svg>
    <svg class="moon-icon" viewBox="0 0 24 24">
        <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 01-4.4 2.26 5.403 5.403 0 01-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/>
    </svg>
</div>

<div class="card">
    <div class="countdown-label">距离已解锁还有：</div>
    <div class="countdown" id="countdown"></div>
    <button class="unlock-btn" id="unlockBtn" disabled>未解锁</button>
</div>
// 这里自己改页脚
<footer>
    <a href="https://beian.miit.gov.cn/" target="_blank">浙ICP备2023036308号-1</a> | ©2023-2026 <a href="https://www.kybll.cn" target="_blank">空雨不流泪</a>. 保留所有权利
</footer>

<script>
    const html = document.documentElement;
    const themeToggle = document.getElementById('themeToggle');
    const countdownEl = document.getElementById('countdown');
    const unlockBtn = document.getElementById('unlockBtn');

    // 6点自动切换日夜模式（这里自己改）
    function autoTheme() {
        const hour = new Date().getHours();
        const isDay = hour >= 6;
        html.setAttribute('data-theme', isDay ? 'light' : 'dark');
    }

    // 手动切换模式
    themeToggle.addEventListener('click', () => {
        const current = html.getAttribute('data-theme');
        html.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
    });

    // 初始化
    autoTheme();

    // 倒计时目标时间（这里自己改）
    const targetDate = new Date('2026-04-09T00:00:00');

    function updateCountdown() {
        const now = new Date();
        const diff = targetDate - now;

        if (diff <= 0) {
            // 已解锁当天显示礼花图标
            countdownEl.innerHTML = `
                <div class="birthday-greeting">
                    <svg class="fireworks-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path d="M12 2L15 9H18L16 15L22 18L15 20L12 26L9 20L3 18L9 15L7 9H10L12 2Z"/>
                    </svg>
                    <div>今天！</div>
                </div>
            `;
            unlockBtn.disabled = false;
            unlockBtn.textContent = '已解锁';
            unlockBtn.onclick = () => {
                window.location.href = '这里输入按钮跳转的网址';
            };
            return;
        }

        const d = Math.floor(diff / (1000 * 60 * 60 * 24));
        const h = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const s = Math.floor((diff % (1000 * 60)) / 1000);

        // 紧凑衔接格式
        countdownEl.textContent = `${d}天${h}时${m}分${s}秒`;
    }

    updateCountdown();
    setInterval(updateCountdown, 1000);
</script>
</body>
</html>

或者直接从下面下载也行