自定义30小时模拟时钟：Minute-hand异常及变量数据延续方案咨询

问题根源 #

你的分针无法正常移动，核心原因是计数变量被重复初始化——如果把秒数、分数的累计变量放在定时器回调函数内部，每次定时器触发时这些变量都会被重置为初始值，永远无法累计到触发分针移动的阈值（12步）。

解决思路 #

将秒、分、时的累计变量放在定时器函数外部，让它们在作用域中持续保留状态，每次定时器执行时基于上一次的累计值更新，而非重新初始化。

修正后的代码示例 #

// 全局保留计数状态，避免每次重置
let seconds = 0;
let minutes = 0;
let hours = 0;

// 定时器间隔：假设自定义1秒对应现实1秒，可按需调整
setInterval(() => {
  // 更新秒数
  seconds++;

  // 秒针走完12步，重置秒数并更新分针
  if (seconds === 12) {
    seconds = 0;
    minutes++;

    // 分针走完12步，重置分数并更新时针
    if (minutes === 12) {
      minutes = 0;
      hours++;

      // 时针走完30步，重置小时数
      if (hours === 30) {
        hours = 0;
      }
    }
  }

  // 计算各指针角度并更新DOM
  // 秒针：一圈12步，每步30度（360/12）
  document.querySelector('.second-hand').style.transform = `rotate(${seconds * 30}deg)`;
  // 分针：每步30度
  document.querySelector('.minute-hand').style.transform = `rotate(${minutes * 30}deg)`;
  // 时针：一圈30步，每步12度（360/30）
  document.querySelector('.hour-hand').style.transform = `rotate(${hours * 12}deg)`;
}, 1000);

关键说明 #

• 变量seconds、minutes、hours必须在定时器外部声明，确保每次定时器回调执行时，读取的是上一次累计后的数值，而非重新初始化的0。
• 严格按照规则嵌套判断：秒针满12步触发分针+1，分针满12步触发时针+1，时针满30步重置。

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