当前位置：首页 > article >正文

2025跨年倒计时

article 2025/3/4 15:43:12

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025年跨年倒计时</title>
    <style>
        /* 页面整体样式 */
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(45deg, #f39c12, #e74c3c, #8e44ad, #3498db);
            background-size: 400% 400%;
            animation: gradientAnimation 15s ease infinite;
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
            overflow: hidden;
        }

        /* 动画背景渐变 */
        @keyframes gradientAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 页面标题样式 */
        .title {
            font-size: 2.5em;
            font-weight: bold;
            margin-bottom: 20px;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.7);
        }

        /* 主倒计时样式 */
        .countdown {
            font-size: 4em;
            font-weight: bold;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.7);
            margin-bottom: 20px;
            letter-spacing: 3px;
        }

        /* 新年祝福样式 */
        .message {
            font-size: 2.5em;
            font-weight: bold;
            letter-spacing: 2px;
            margin-top: 20px;
        }

        /* 新年闪烁效果 */
        .happy-new-year {
            font-size: 5em;
            color: #ff6347;
            animation: sparkle 1.5s infinite alternate;
            text-shadow: 0 0 10px #ff6347, 0 0 30px #ff6347, 0 0 60px #ff6347;
        }

        /* 闪烁动画 */
        @keyframes sparkle {
            0% { color: #ff6347; text-shadow: 0 0 10px #ff6347, 0 0 30px #ff6347, 0 0 60px #ff6347; }
            100% { color: #fff; text-shadow: 0 0 10px #fff, 0 0 30px #fff, 0 0 60px #fff; }
        }

        /* 全屏按钮样式 */
        .btn-fullscreen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 2em;
            font-weight: bold;
            border: none;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background 0.3s ease;
        }

        .btn-fullscreen:hover {
            background: rgba(0, 0, 0, 0.8);
        }
    </style>
</head>
<body>

    <!-- 全屏按钮 -->
    <button class="btn-fullscreen" id="fullscreenButton">
        点击全屏观看倒计时
    </button>

    <!-- 标题 -->
    <div class="title">2025年跨年倒计时</div>

    <div>
        <!-- 倒计时显示 -->
        <div class="countdown" id="countdown"></div>
        <!-- 新年祝福 -->
        <div class="message" id="message"></div>
        <!-- 新年闪烁祝福 -->
        <div class="happy-new-year" id="happyNewYear">🎉🎆🎇</div>
    </div>

    <script>
        // 目标时间：2025年1月1日 00:00:00
        const targetDate = new Date('2025-01-01T00:00:00').getTime();

        // 更新倒计时
        function updateCountdown() {
            const now = new Date().getTime();
            const distance = targetDate - now;

            // 计算剩余的天、时、分、秒
            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);

            // 显示倒计时
            document.getElementById('countdown').innerHTML = `${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒`;

            // 当倒计时结束
            if (distance < 0) {
                document.getElementById('countdown').innerHTML = "新年快乐！";
                document.getElementById('message').innerHTML = "2025年到啦！";
                document.getElementById('happyNewYear').innerHTML = "🎉🎆🎇";
            }
        }

        // 每秒更新一次倒计时
        setInterval(updateCountdown, 1000);

        // 全屏按钮功能
        const fullscreenButton = document.getElementById('fullscreenButton');

        fullscreenButton.addEventListener('click', () => {
            // 切换全屏模式
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) { // Firefox
                document.documentElement.mozRequestFullScreen();
            } else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari, Opera
                document.documentElement.webkitRequestFullscreen();
            } else if (document.documentElement.msRequestFullscreen) { // IE/Edge
                document.documentElement.msRequestFullscreen();
            }
            // 隐藏全屏按钮
            fullscreenButton.style.display = 'none';
        });
    </script>

</body>
</html>