原生JavaScript组合时钟切换后数字时钟显示1秒即消失问题

核心问题 #

数字时钟显示1秒后消失的原因是**setClock函数的定时任务一直在后台运行**，这个函数每1秒执行一次，里面固定写了document.getElementById("digital-clock").style.display = "none";——无论当前显示的是模拟还是数字时钟，都会强制隐藏数字时钟。切换到数字时钟后，1秒后setClock执行，就会把数字时钟藏起来。

修复方案 #

方案1：修改setClock的隐藏逻辑 #

让setClock只在模拟时钟显示时才隐藏数字时钟，避免无差别隐藏：

function setClock() {
  var currentDate = new Date();
  var secondsRatio = currentDate.getSeconds() / 60;
  var minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
  var hoursRatio = (minutesRatio + currentDate.getHours()) / 12;
  setRotation(secondHand, secondsRatio);
  setRotation(minuteHand, minutesRatio);
  setRotation(hourHand, hoursRatio);
  
  // 仅当模拟时钟显示时，才隐藏数字时钟
  const analogClock = document.getElementById("analog-clock");
  if (analogClock.style.display !== "none") {
    document.getElementById("digital-clock").style.display = "none";
  }
}

方案2：切换时钟时管理定时任务（更严谨） #

全局保存定时任务ID，切换时暂停不需要的任务，避免资源浪费和逻辑冲突：

// 全局变量保存定时ID，用于后续清除任务
let analogIntervalId;
let digitalIntervalId;

// 初始化模拟时钟的定时任务
function initAnalogClock() {
  analogIntervalId = setInterval(setClock, 1000);
  setClock(); // 立即执行一次，避免页面加载延迟
}

function setClock() {
  var currentDate = new Date();
  var secondsRatio = currentDate.getSeconds() / 60;
  var minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
  var hoursRatio = (minutesRatio + currentDate.getHours()) / 12;
  setRotation(secondHand, secondsRatio);
  setRotation(minuteHand, minutesRatio);
  setRotation(hourHand, hoursRatio);
  // 移除原固定隐藏数字时钟的代码
}

function toggleClock() {
  var analog = document.getElementById("analog-clock");
  var digital = document.getElementById("digital-clock");
  var btn = document.getElementById("btn");

  if (analog.style.display === "none") {
    // 切换到模拟时钟
    analog.style.display = "block";
    digital.style.display = "none";
    btn.innerHTML = "Click me to display digital clock";
    
    // 停止数字时钟定时，重启模拟时钟定时
    clearInterval(digitalIntervalId);
    initAnalogClock();
  } else {
    // 切换到数字时钟
    analog.style.display = "none";
    digital.style.display = "block";
    btn.innerHTML = "Click me to display analog clock";
    
    // 停止模拟时钟定时，启动数字时钟定时（间隔改为1000ms即可）
    clearInterval(analogIntervalId);
    displayDigitalTime(); // 立即执行一次，避免延迟
    digitalIntervalId = setInterval(displayDigitalTime, 1000);
  }
}

// 页面加载时初始化模拟时钟
initAnalogClock();

额外优化点 #

• 数字时钟的定时间隔改为1000ms（1秒）即可，原10ms会造成不必要的性能消耗。
• 初始页面加载时，通过CSS默认隐藏数字时钟，避免JS执行前的页面闪烁：

#digital-clock {
  display: none;
}

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