当前位置：首页 > JavaScript

js实现倒计时秒

2026-04-04 04:07:09JavaScript

js实现倒计时秒

使用 JavaScript 实现倒计时秒

方法一：基于 `setInterval` 的简单倒计时

// 设置倒计时时间（秒）
let countdown = 10;

// 获取显示倒计时的元素
const timerElement = document.getElementById('timer');

// 更新倒计时显示
function updateTimer() {
    timerElement.textContent = countdown;
    countdown--;

    // 倒计时结束处理
    if (countdown < 0) {
        clearInterval(interval);
        timerElement.textContent = '倒计时结束';
    }
}

// 每秒执行一次更新
const interval = setInterval(updateTimer, 1000);

方法二：基于 `Date` 对象的高精度倒计时

// 设置目标时间（当前时间 + 10秒）
const targetTime = new Date();
targetTime.setSeconds(targetTime.getSeconds() + 10);

function updateCountdown() {
    const currentTime = new Date();
    const remainingTime = Math.max(0, Math.floor((targetTime - currentTime) / 1000));

    document.getElementById('timer').textContent = remainingTime;

    if (remainingTime <= 0) {
        clearInterval(countdownInterval);
    }
}

const countdownInterval = setInterval(updateCountdown, 1000);

方法三：使用 `requestAnimationFrame` 实现平滑倒计时

let countdown = 10;
const startTime = Date.now();

function animateCountdown() {
    const elapsed = (Date.now() - startTime) / 1000;
    const remaining = Math.max(0, countdown - elapsed);

    document.getElementById('timer').textContent = Math.floor(remaining);

    if (remaining > 0) {
        requestAnimationFrame(animateCountdown);
    }
}

requestAnimationFrame(animateCountdown);

注意事项

使用 setInterval 可能会有时间漂移问题，长时间运行可能导致误差
requestAnimationFrame 适合需要平滑动画的场景
高精度场景建议使用方法二，基于 Date 对象计算
清除定时器时使用 clearInterval 防止内存泄漏

完整 HTML 示例

<!DOCTYPE html>
<html>
<head>
    <title>倒计时示例</title>
</head>
<body>
    <div id="timer">10</div>

    <script>
        let countdown = 10;
        const timerElement = document.getElementById('timer');

        const interval = setInterval(() => {
            timerElement.textContent = countdown;
            countdown--;

            if (countdown < 0) {
                clearInterval(interval);
                timerElement.textContent = '倒计时结束';
            }
        }, 1000);
    </script>
</body>
</html>