求助：如何实现可持久化循环的JavaScript六分钟倒计时器？

数据老陈

2026-8-6

实现6分钟循环持久化倒计时器

下面是满足需求的完整实现代码，核心是利用localStorage保存剩余计时，确保页面刷新后不会重置，直到计时归零才重新开始6分钟倒计时：

HTML结构

<div id="countdown" style="font-size: 24px; font-weight: bold; margin: 20px;"></div>

JavaScript逻辑

// 定义6分钟对应的毫秒数
const CYCLE_DURATION = 6 * 60 * 1000;
const countdownEl = document.getElementById('countdown');

// 初始化剩余时间：优先从localStorage读取，没有则用初始6分钟
let remainingTime = localStorage.getItem('remainingCountdownTime');
remainingTime = remainingTime ? parseInt(remainingTime, 10) : CYCLE_DURATION;

// 更新倒计时显示的函数
function updateCountdown() {
    if (remainingTime <= 0) {
        // 计时归零，重置为6分钟
        remainingTime = CYCLE_DURATION;
        localStorage.setItem('remainingCountdownTime', remainingTime);
    }

    // 计算分、秒
    const minutes = Math.floor(remainingTime / 60000);
    const seconds = Math.floor((remainingTime % 60000) / 1000);

    // 格式化显示，确保两位数
    countdownEl.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

    // 减少1秒（1000毫秒）
    remainingTime -= 1000;
    // 同步更新localStorage
    localStorage.setItem('remainingCountdownTime', remainingTime);
}

// 首次执行一次，避免页面加载后延迟显示
updateCountdown();
// 每秒更新一次倒计时
setInterval(updateCountdown, 1000);