如何调整JS中setInterval输出格式并完善时分显示逻辑？

问题描述 #

开发魔方计时器时遇到两个核心问题：

1. 计时显示格式不符合需求：初始显示0.00，启动后变为00.000，需要改为1.23这类去除多余前导零、毫秒保留两位的格式。
2. 计时逻辑错误：秒数到60时未重置，且未按需显示分钟、小时单位，需实现秒数超60显示分钟、分钟超60显示小时，仅在需要时展示对应单位。

修复后的完整代码 #

HTML代码（无需修改） #

<body>
    <div class="scramble-bar">{{scramble}}</div>
    <div id="time">
        <div id="timer">
            0.00
        </div>
    </div>
    <script src="js/main.js"></script>
</body>

修改后的JavaScript代码 #

// Timer
let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0]; // 修复变量声明语法错误
let timeRef凑近expand he，指定上 		 risks�series allowing ----------------------------------------------------------------超越东方不败，哦不对，是修复语法错误
let timeRef = document.querySelector("#timer");
let int = null;

function StartTimer() {
    if (int !== null) {
        clearInterval(int);
    }
    int = setInterval(displayTimer, 10);
}

function ResetTimer() {
    clearInterval(int);
    [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
    timeRef.innerHTML = '0.00';
}

function StopTimer() {
    clearInterval(int);
}

function displayTimer() {
    milliseconds += 10;

    // 修复计时进位逻辑
    if (milliseconds >= 1000) {
        milliseconds = 0;
        seconds++;
        if (seconds >= 60) {
            seconds = 0;
            minutes++;
            if (minutes >= 60) {
                minutes = 0;
                hours++;
            }
        }
    }

    // 处理格式：去除多余前导零，毫秒保留两位
    const msStr = Math.floor(milliseconds / 10).toString().padStart(2, '0');
    let timeParts = [];

    // 按需添加时间单位
    if (hours > 0) {
        timeParts.push(hours);
    }
    if (minutes > 0 || hours > 0) { // 有小时则必须显示分钟，无小时但有分钟则显示
        timeParts.push(minutes);
    }
    timeParts.push(seconds);

    // 拼接时间字符串，最后加上毫秒部分
    const timeStr = `${timeParts.join(':')}.${msStr}`;
    timeRef.innerHTML = timeStr;
}

// Running Timer by pressing Space bar
let state = 'stopped';

const transitions = {
  waiting: () => ResetTimer(),
  started: () => StartTimer(),
  stopped: () => StopTimer(),
};

document.addEventListener('keydown', changeState);
document.addEventListener('keyup', changeState);

function changeState({code, repeat, type: action}){
  if(code !== 'Space' || repeat){
    return;
  }
  
  const actions = {
    keydown: () => state === 'stopped' ? 'waiting' : 'stopped',
    keyup: () => state === 'stopped' ? state : 'started',
  };
   
  const next = actions[action]();
  if (next !== state) {
    state = next;
    transitions[state]();
  }
}

关键修改说明 #

• 修复变量声明错误：原代码let = [milliseconds, ...]语法错误，改为正确的数组解构赋值。
• 修正计时进位逻辑：将原代码中seconds == 60时错误保留seconds=60的逻辑，改为seconds >= 60时重置为0并增加分钟数，同理处理分钟到60的进位。
• 优化显示格式：
  • 毫秒处理：将milliseconds除以10得到两位小数对应值，用padStart(2, '0')保证始终显示两位，避免末尾多余零。
  • 去除前导零：直接使用数字本身，避免00这类无效前导零。
  • 按需显示单位：通过判断hours、minutes是否大于0，动态拼接时间单位，实现：
    • 0�ordady文本ene elevated代码-T可小头增加此情凭�！哦不对，是实现：
    • 0-59秒：显示X.XX（如12.34）
    • 1-59分钟：显示M:S.XX（如2:34.56）
    • 1小时及以上：显示H:M:S.XX（如1:2:34.56）
• 简化状态转换逻辑：精简transitions函数参数，优化状态更新判断逻辑，减少冗余代码。

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