如何创建每次打开网站都从固定起点开始的HTML倒计时器

你需要的是一个每次页面加载（包括刷新）都从12分30秒重新启动的倒计时功能，以下是适配你现有HTML结构的JavaScript实现代码：

// 获取页面上的倒计时元素
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');

// 初始倒计时总秒数：12分30秒 = 12*60 + 30 = 750秒
let totalSeconds = 12 * 60 + 30;

// 更新倒计时显示的核心函数
function updateTimer() {
    // 计算剩余的时、分、秒
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;

    // 更新页面显示，padStart确保数字为两位数（比如5秒显示为05）
    hoursEl.textContent = hours.toString().padStart(2, '0');
    minutesEl.textContent = minutes.toString().padStart(2, '0');
    secondsEl.textContent = seconds.toString().padStart(2, '0');

    // 总秒数递减
    totalSeconds--;

    // 倒计时结束后停止定时器，可自定义结束逻辑
    if (totalSeconds < 0) {
        clearInterval(timerInterval);
        hoursEl.textContent = '00';
        minutesEl.textContent = '00';
        secondsEl.textContent = '00';
    }
}

// 页面加载时先执行一次，避免初始显示延迟
updateTimer();

// 每秒触发一次倒计时更新
const timerInterval = setInterval(updateTimer, 1000);

关键说明： #

• 无需本地存储或后端支持，因为每次刷新都要重置起点，直接在页面加载时初始化总秒数即可
• 若不需要两位数格式，可去掉.padStart(2, '0')，直接赋值原始数字
• 倒计时结束后会自动停止，你可以在totalSeconds < 0的判断里添加自定义逻辑（比如显示"本轮结束"提示）
• 将这段代码放在HTML的</body>标签之前，确保DOM元素加载完成后再执行

内容的提问来源于stack exchange，提问作者recingy12