JavaScript如何实现时分秒递增计时器，满足指定条件启动并可触发停止

原代码问题说明 #

• 拼写错误：innerHtml 应为 innerHTML，导致id为data的div无法正常填充内容
• 计时单位不匹配：setInterval每1000毫秒执行一次，原代码中distance每次累加1，但时间换算逻辑按毫秒单位计算，会导致显示的时间远慢于实际流逝时间
• 未暴露计时器控制入口：无法接收外部停止信号终止计时

修复后完整代码 #

<div id="data"></div>
<p id="demo"></p>

<script>
const api_url = 'json.php'
// 计时器ID保存到全局，方便停止时调用
let timerId = null

async function okejson() {
    const resp = await fetch(api_url);
    const dat = await resp.json();
    const awal = dat[0]
    const date = awal.tanggal
    // 修正innerHTML拼写，填充完成后启动计时
    document.getElementById("data").innerHTML = date

    // 按秒计数逻辑更直观，避免单位换算错误
    let totalSeconds = 0;
    timerId = setInterval(function() {
        totalSeconds += 1;
        const days = Math.floor(totalSeconds / (60 * 60 * 24));
        const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
        const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
        const seconds = totalSeconds % 60;
        document.getElementById("demo").innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
    }, 1000); 
}

// 停止计时器方法，接收到停止信号时直接调用即可
function stopTimer() {
    if (timerId) {
        clearInterval(timerId)
        timerId = null
    }
}

// 触发数据请求和后续计时逻辑
okejson()
</script>

功能说明 #

• 自动触发逻辑：请求接口拿到date值并填充到#data元素后，自动从00:00:00开始递增计时
• 停止逻辑：需要终止计时时，直接调用stopTimer()方法即可
• 时间显示格式：支持天、时、分、秒的完整显示，长时间运行也不会出现单位换算错误

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