在ASP.NET Core中用Moment.js实现双时区模拟时钟的问题

问题分析 #

• 小时角度计算错误：原代码中hour变量额外添加了90deg偏移，而transform-origin: bottom的设置下，0deg正好对应12点方向，多余偏移导致时针位置错误。
• 未实现双时钟结构：当前代码仅包含单个时钟容器，无法同时显示两个时区时间。
• 脚本引入顺序可能遗漏：需确保按正确顺序引入依赖脚本。

修正后的完整代码 #

index.cshtml（双时钟结构） #

<!-- 伦敦时区时钟 -->
<div class="clockContainer" data-timezone="Europe/London">
  <div class="hour"></div>
  <div class="minute"></div>
  <div class="second"></div>
</div>
<h3 class="location">London</h3>

<!-- 纽约时区时钟 -->
<div class="clockContainer" data-timezone="America/New_York">
  <div class="hour"></div>
  <div class="minute"></div>
  <div class="second"></div>
</div>
<h3 class="location">New York</h3>

<!-- 依赖脚本引入 -->
<script src="js/moment.js"></script>
<script src="js/moment-timezone-with-data.js"></script>
<script src="js/jquery.js"></script>

CSS（适配多时钟的类选择器） #

.clockContainer {
  position: relative;
  margin: 20px auto;
  height: 100px;
  width: 100px;
  background: url(clock.png) no-repeat;
  background-size: 100%;
}

.hour,
.minute,
.second {
  position: absolute;
  background: black;
  border-radius: 10px;
  transform-origin: bottom;
}

.hour {
  width: 1.8%;
  height: 25%;
  top: 25%;
  left: 48.85%;
  opacity: 0.8;
}

.minute {
  width: 1.6%;
  height: 32%;
  top: 19%;
  left: 48.9%;
  opacity: 0.8;
}

.second {
  width: 1%;
  height: 40%;
  top: 9%;
  left: 49.25%;
  opacity: 0.8;
}

.location {
  text-align: center;
  margin-bottom: 30px;
}

JS（支持多时钟+修正角度计算） #

$(function () {
  function updateClocks() {
    $('.clockContainer').each(function() {
      const timezone = $(this).data('timezone');
      const now = moment.tz(timezone);
      
      // 修正角度计算逻辑，移除错误的90deg偏移
      const second = now.seconds() * 6; // 每秒6度（360/60）
      const minute = now.minutes() * 6 + now.seconds() * 0.1; // 分钟包含秒数偏移，走时更平滑
      const hour = ((now.hours() % 12) * 30) + (now.minutes() * 0.5); // 小时包含分钟偏移，精度更高

      $(this).find('.hour').css("transform", `rotate(${hour}deg)`);
      $(this).find('.minute').css("transform", `rotate(${minute}deg)`);
      $(this).find('.second').css("transform", `rotate(${second}deg)`);
    });
  }

  // 初始化立即执行一次，避免页面加载后延迟显示
  updateClocks();
  // 每秒更新时钟
  setInterval(updateClocks, 1000);
});

关键修正说明 #

• 移除小时角度的90deg偏移：原代码的额外偏移会导致时针初始位置错误，transform-origin: bottom设置下0deg对应12点方向，无需额外旋转。
• 优化时间精度：给分钟加入秒数的微小偏移、给小时加入分钟的微小偏移，让时钟指针的转动更贴合实际时间变化。
• 支持多时钟扩展：通过data-timezone属性绑定时区，使用类选择器批量处理所有时钟，后续新增时区只需复制容器结构修改时区值即可。
• 规范脚本引入顺序：必须按moment.js→moment-timezone-with-data.js→jQuery的顺序引入，避免依赖加载错误。

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