原生HTML+JS实现倒计时计数器

2024/06/27

提示：以下代码拷贝到本地，填入新建的 `.html` 文件，使用浏览器打开即可预览效果。 ```ht

月上老狗

@dingdangdog

渲染中...

提示：以下代码拷贝到本地，填入新建的 `.html` 文件，使用浏览器打开即可预览效果。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown to Midnight</title>
    <style>
        #countdown {
            font-size: 4em;
            color: #333;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="countdown">倒计时：00:00:00</div>
    <script>
        function updateCountdown() {
            // 获取当前时间
            const now = new Date();
            // 获取明天00:00的时间
            const tomorrow = new Date();
            tomorrow.setHours(24, 0, 0, 0);

            // 计算时间差（毫秒）
            const timeDifference = tomorrow - now;

            // 计算剩余的小时、分钟和秒
            const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

            // 格式化时间
            const formattedHours = hours.toString().padStart(2, '0');
            const formattedMinutes = minutes.toString().padStart(2, '0');
            const formattedSeconds = seconds.toString().padStart(2, '0');

            // 更新倒计时显示
            document.getElementById('countdown').textContent = `DLC解锁倒计时：${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
        }

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

        // 初次调用，避免页面加载时的延迟
        updateCountdown();
    </script>
</body>
</html>

```

<!-- more -->

END

登录后查看和发表评论

前往登录