html跨年代码

作者：月冷清发布日期:2026-04-20 浏览:85

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 跨年代码示例</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #000;
            color: #fff;
            font-family: Arial, sans-serif;
        }
        .countdown {
            font-size: 5rem;
        }
    </style>
</head>
<body>
    <div class="countdown" id="countdown">10</div>

    <script>
        let countdown = document.getElementById('countdown');
        let timeLeft = 10;

        function updateCountdown() {
            if (timeLeft > 0) {
                countdown.textContent = timeLeft;
                timeLeft--;
            } else {
                clearInterval(interval);
                countdown.textContent = "新年快乐!";
            }
        }

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

解释说明：

HTML 结构：创建了一个简单的 HTML 页面，包含一个 div 元素用于显示倒计时。
CSS 样式：设置了页面的背景颜色为黑色，文本颜色为白色，并且居中显示倒计时数字。
JavaScript 逻辑：
- 获取页面中的 div 元素，并设置初始倒计时时间为 10 秒。
- 使用 setInterval 每秒更新一次倒计时，直到倒计时结束。
- 当倒计时结束时，清除定时器并显示“新年快乐!”。

这个示例代码展示了如何使用 HTML、CSS 和 JavaScript 创建一个简单的跨年倒计时效果。

上一篇：html for循环

下一篇：html空白模板