JavaScript模拟时钟Date.setHours设置不持久 数秒后恢复当前时间

异常根因说明 #

• 设置时间后自动跳回系统时间：时钟更新函数硬编码每次直接读取实时系统时间，没有持久化存储用户设置的时间偏移量。你在点击设置时仅临时计算了一次指针角度，后续定时器触发时，startClock()重新读取实时系统时间计算角度，直接覆盖了用户设置的指针位置。
• 定时器触发后指针停止走动：存在多处代码执行阻断问题：
  • 拼写错误：设置按钮的逻辑分支中写了consol.log，缺失字母e，触发分支时会直接抛出引用错误，中断后续所有JS执行。
  • 无效传参：新创建的定时器回调定义了未使用的形参intervalInput，但setInterval不会自动将外部变量传入回调，实际执行时该参数为undefined；且三个时钟更新函数本身不接收参数，传值逻辑完全无效。
  • 状态丢失：用户输入的自定义时间仅存在于点击事件的临时作用域，回调执行完毕后变量就被销毁，后续定时器逻辑无法读取到用户设置的配置。

针对性修复步骤 #

1. 定义全局的时间偏移变量，持久化存储用户设置的本地时钟时间差：
   let customLocalTimeOffset = 0; // 单位为毫秒，默认无偏移
2. 重构本地时钟更新函数startClock()，叠加自定义偏移量计算时间，不再硬编码读取系统时间：

   function startClock() {
       const systemTime = new Date();
       // 叠加用户自定义的时间偏移
       const targetTime = new Date(systemTime.getTime() + customLocalTimeOffset);
       const hour = targetTime.getHours();
       const minute = targetTime.getMinutes();
       const second = targetTime.getSeconds();
   
       // 原有指针角度计算、DOM赋值逻辑保持不变
       const hrPosition = hour * 360 / 12 + ((minute * 360 / 60) / 12);
       const minPosition = (minute * 360 / 60) + (second * 360 / 60) / 60;
       const secPosition = second * 360 / 60;
   
       hourHand.style.transform = `rotate(${hrPosition}deg)`;
       minuteHand.style.transform = `rotate(${minPosition}deg)`;
       secondHand.style.transform = `rotate(${secPosition}deg)`;
   }
   

3. 重写设置按钮的点击逻辑，修正执行错误：
   • 修正拼写错误，将consol.log替换为console.log
   • 计算用户设置时间与当前系统时间的差值，存入全局偏移变量
   • 移除定时器回调中无效的形参逻辑，直接调用无参的时钟更新函数
     核心参考代码：

   $('#addTime').on('click', function () {
       // 清理旧定时器，避免多个定时器并行执行
       if (currentSetInterval) clearInterval(currentSetInterval);
       
       const inputHour = Number($('#input').val());
       const currentTime = new Date();
       // 构造用户设置的目标时间
       const targetTime = new Date(currentTime.setHours(inputHour));
       // 计算并存储时间偏移量
       customLocalTimeOffset = targetTime.getTime() - new Date().getTime();
   
       // 重启定时器，所有时钟函数自动读取全局变量计算时间
       currentSetInterval = setInterval(function () {
           startClock();
           startClockC();
           startClockL();
       }, 1000);
   })
   

注意：洛杉矶、伦敦时区的时钟不需要叠加本地自定义偏移量，仅本地时钟应用用户设置的时间即可。

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