如何调整JavaScript时钟函数适配3个不同时区？是否适合使用Class实现？

一、是否应当使用Class实现？ #

非常适合，理由如下：

• 每个时区的时钟需要独立维护指针DOM、时区配置、定时器ID等私有状态，Class可以把相关属性和逻辑封装到一起，避免全局变量冲突
• 可以通过实例化快速生成任意数量的时钟，不用重复编写相同的转动逻辑，后续扩展功能（比如时钟启停、样式自定义）也更方便

二、改造步骤与代码 #

前置HTML调整 #

原来的单一时钟只有一套带id的指针，需要改成多套时钟结构，用class标识指针，用自定义属性存时区：

<!-- 北京时间 -->
<div class="clock" data-timezone="Asia/Shanghai">
  <div class="hand second_hand"></div>
  <div class="hand min_hand"></div>
  <div class="hand hour_hand"></div>
</div>
<!-- 纽约时间 -->
<div class="clock" data-timezone="America/New_York">
  <div class="hand second_hand"></div>
  <div class="hand min_hand"></div>
  <div class="hand hour_hand"></div>
</div>
<!-- 伦敦时间 -->
<div class="clock" data-timezone="Europe/London">
  <div class="hand second_hand"></div>
  <div class="hand min_hand"></div>
  <div class="hand hour_hand"></div>
</div>

JS改造代码 #

class Clock {
  constructor(container, timezone) {
    // 存储当前时钟的配置与DOM节点
    this.timezone = timezone
    this.secondHand = container.querySelector('.second_hand')
    this.minsHand = container.querySelector('.min_hand')
    this.hourHand = container.querySelector('.hour_hand')
    // 初始化时间并启动定时器
    this.update()
    this.timer = setInterval(() => this.update(), 1000)
  }

  update() {
    const now = new Date()
    // 用时区标准API获取对应时区的时分秒，自动处理夏令时，不用手动算偏移
    const timeFormatter = new Intl.DateTimeFormat('en-US', {
      timeZone: this.timezone,
      hour: 'numeric',
      minute: 'numeric',
      second: 'numeric',
      hour12: false
    })
    const [hour, mins, seconds] = timeFormatter.format(now).split(':').map(Number)

    // 指针转动逻辑和原有逻辑一致
    const secondsDegrees = (seconds / 60) * 360 + 90
    this.secondHand.style.transform = `rotate(${secondsDegrees}deg)`

    const minsDegrees = (mins / 60) * 360 + (seconds / 60) * 6 + 90
    this.minsHand.style.transform = `rotate(${minsDegrees}deg)`

    const hourDegrees = (hour / 12) * 360 + (mins / 60) * 30 + 90
    this.hourHand.style.transform = `rotate(${hourDegrees}deg)`
  }

  // 可选：销毁时钟的方法，清理定时器避免内存泄漏
  destroy() {
    clearInterval(this.timer)
  }
}

// 批量初始化所有时钟
document.querySelectorAll('.clock').forEach(clockEl => {
  const timezone = clockEl.dataset.timezone
  new Clock(clockEl, timezone)
})

注意事项 #

• 时区参数请使用标准IANA时区名称，不要手动加减小时偏移，可以避免夏令时、时区变更带来的时间错误
• 如果需要新增时区，只需要新增对应HTML结构即可，无需修改JS逻辑

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