(已更新)2023春节倒计时新款HTML单页源码

这篇文章距离上次修改已过193天，其中的内容可能已经有所变动。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>春节倒计时</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #2e3440;
            font-family: Arial, sans-serif;
            color: #d7dae0;
        }
        .countdown {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .timer {
            font-size: 3em;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="countdown">
        <div class="timer">
            <!-- 倒计时显示 -->
        </div>
        <button onclick="countdown()">开始倒计时</button>
    </div>
 
    <script>
        function countdown() {
            const newYear = new Date('2023-02-02T00:00:00'); // 假设为2023年春节
            const timer = document.querySelector('.timer');
 
            function updateClock() {
                const now = new Date();
                const distance = newYear - now;
 
                if (distance < 0) {
                    clearInterval(intervalId);
                    timer.innerHTML = '已经过春节！';
                    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);
 
                timer.innerHTML = `剩余时间: <strong>${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒</strong>`;
            }
 
            updateClock(); // 首次运行
            const intervalId = setInterval(updateClock, 1000);
        }
    </script>
</body>
</html>

这个代码实例提供了一个简单的HTML页面，其中包含了一个倒计时器。当用户点击按钮时，页面上会显示春节剩余的天数、小时、分钟和秒数。代码使用了JavaScript来计算时间差异，并通过CSS为页面元素设置样式。这个实例可以作为创建类似功能

(已更新)2023春节倒计时新款HTML单页源码

评论已关闭

推荐阅读