JavaScript 实现准确倒计时的示例代码与解释

回答：

在 JavaScript 中实现一个准确的倒计时功能，可以使用 setInterval 函数来定期更新倒计时显示。以下是一个示例代码，展示了如何实现一个准确的倒计时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>
</head>
<body>
    <div id="countdown"></div>

    <script>
        function startCountdown(duration) {
            let startTime = Date.now();
            let endTime = startTime + duration * 1000;

            function updateCountdown() {
                let now = Date.now();
                let remainingTime = endTime - now;

                if (remainingTime <= 0) {
                    document.getElementById('countdown').innerHTML = "Time's up!";
                    clearInterval(intervalId);
                } else {
                    let seconds = Math.floor((remainingTime / 1000) % 60);
                    let minutes = Math.floor((remainingTime / (1000 * 60)) % 60);
                    let hours = Math.floor((remainingTime / (1000 * 60 * 60)) % 24);
                    let days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));

                    document.getElementById('countdown').innerHTML = 
                        `${days}d ${hours}h ${minutes}m ${seconds}s`;
                }
            }

            updateCountdown(); // Initial call to display the countdown immediately
            let intervalId = setInterval(updateCountdown, 1000);
        }

        // Start a countdown of 1 hour (3600 seconds)
        startCountdown(3600);
    </script>
</body>
</html>

解释

HTML 部分:
- 一个 div 元素用于显示倒计时。
JavaScript 部分:
- startCountdown 函数接受一个参数 duration，表示倒计时的总秒数。
- startTime 记录倒计时开始的时间。
- endTime 计算倒计时结束的时间。
- updateCountdown 函数每秒更新一次倒计时显示。
- 使用 setInterval 每秒调用 updateCountdown 函数。

使用方法

调用 startCountdown 函数并传入倒计时的总秒数。例如，startCountdown(3600) 开始一个 1 小时的倒计时。

这个示例代码会在页面上显示一个倒计时，并且每秒更新一次，直到倒计时结束。

JavaScript 实现准确倒计时的示例代码与解释

由 ChatGPT4o 使用 ChatGPT 4o 回答

解释

使用方法