JS实现时钟下一分钟展示时分钟显示60而非归0如何解决

问题原因 #

你当前的代码仅对分钟变量做了自增操作，没有处理分钟到60后的进位逻辑，所以会出现显示60分钟的异常，必须等到下一秒获取新的Date对象时，小时数才会更新。

解决方案 #

优先推荐使用Date对象的原生时间处理方法，不需要手动写边界判断逻辑，原生支持自动处理分钟、小时、跨天的进位：

function getClockTime_2() {
  let date = new Date();
  // setMinutes原生处理所有进位逻辑，不会出现60分钟的异常
  date.setMinutes(date.getMinutes() + 1);

  let hr = date.getHours();
  let min = date.getMinutes();

  hr = ("0" + hr).slice(-2);
  min = ("0" + min).slice(-2);
  
  let clock24 = document.getElementById("clockDiv2");
  clock24.innerHTML = `${hr}:${min}:00`;
}
setInterval(getClockTime_2, 1000);

如果你想手动处理进位，也可以补充边界判断逻辑，代码如下：

function getClockTime_2() {
  let date = new Date();

  let hr = date.getHours();
  let min = date.getMinutes();
  min++
  // 补充分钟进位逻辑
  if (min >= 60) {
    min = 0;
    hr++;
    // 补充小时跨天进位逻辑
    if (hr >= 24) {
      hr = 0;
    }
  }

  hr = ("0" + hr).slice(-2);
  min = ("0" + min).slice(-2);
  
  let clock24 = document.getElementById("clockDiv2");
  clock24.innerHTML = `${hr}:${min}:00`;
}
setInterval(getClockTime_2, 1000);

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