跨年html代码

作者：酷帥男爵发布日期:2026-05-03 浏览:68

<!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>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #282c34;
            color: white;
        }
        .countdown {
            font-size: 5rem;
        }
    </style>
</head>
<body>
    <div class="countdown" id="countdown">00:00:00</div>

    <script>
        function updateCountdown() {
            const newYear = new Date('2024-01-01T00:00:00');
            const now = new Date();
            let diff = newYear - now;

            if (diff <= 0) {
                document.getElementById('countdown').innerText = '新年快乐！';
                return;
            }

            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('countdown').innerText = `${String(days).padStart(2, '0')}:${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        }

        setInterval(updateCountdown, 1000);
        updateCountdown(); // 立即更新一次，确保首次加载时显示正确的时间
    </script>
</body>
</html>

解释说明：

HTML结构：页面包含一个div元素用于显示倒计时时间。
CSS样式：设置了页面的背景颜色、文本颜色和字体大小等样式，使页面居中并美观。
JavaScript逻辑：
- 使用setInterval每秒更新一次倒计时。
- 计算当前时间和新年之间的差值，并将其格式化为天、小时、分钟和秒的形式。
- 如果当前时间已经超过了新年时间，则显示“新年快乐！”。

这个代码可以用于创建一个简单的跨年倒计时网页。

上一篇：html超链接怎么跳转到指定的页面

下一篇：html在线编译