如何用HTML和JavaScript正确添加不同时区的日期与时间

你之前的纽约时间实现存在时区使用错误（误用芝加哥时区并手动偏移），而且手动拼接时间字符串容易出现边界bug。下面是更可靠的多时区实现方案，直接利用浏览器原生API处理时区转换和格式化：

优化后的HTML结构 #

为每个时区创建独立容器，通过data-timezone属性绑定对应的IANA标准时区标识符：

<div class="timezone-block">
  <h4>美国纽约</h4>
  <p class="tz-time" data-timezone="America/New_York"></p>
  <p class="tz-date" data-timezone="America/New_York"></p>
</div>
<div class="timezone-block">
  <h4>英国伦敦</h4>
  <p class="tz-time" data-timezone="Europe/London"></p>
  <p class="tz-date" data-timezone="Europe/London"></p>
</div>
<div class="timezone-block">
  <h4>阿联酋迪拜</h4>
  <p class="tz-time" data-timezone="Asia/Dubai"></p>
  <p class="tz-date" data-timezone="Asia/Dubai"></p>
</div>
<div class="timezone-block">
  <h4>澳大利亚悉尼</h4>
  <p class="tz-time" data-timezone="Australia/Sydney"></p>
  <p class="tz-date" data-timezone="Australia/Sydney"></p>
</div>
<div class="timezone-block">
  <h4>印度孟买</h4>
  <p class="tz-time" data-timezone="Asia/Kolkata"></p>
  <p class="tz-date" data-timezone="Asia/Kolkata"></p>
</div>

JavaScript实现（基于jQuery） #

通过原生toLocaleStringAPI自动处理时区转换和格式，避免手动拼接的错误：

$(document).ready(function() {
  // 统一更新所有时区的日期时间
  function updateAllTimezones() {
    const now = new Date();
    
    // 遍历所有绑定了时区的元素
    $('[data-timezone]').each(function() {
      const timezone = $(this).data('timezone');
      
      if ($(this).hasClass('tz-time')) {
        // 格式化12小时制时间（带AM/PM、补零的时分秒）
        const formattedTime = now.toLocaleString('en-US', {
          timeZone: timezone,
          hour12: true,
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit'
        });
        $(this).text(formattedTime);
      } else if ($(this).hasClass('tz-date')) {
        // 格式化完整日期（星期、月份全称、日期、年份）
        const formattedDate = now.toLocaleString('en-US', {
          timeZone: timezone,
          weekday: 'long',
          month: 'long',
          day: 'numeric',
          year: 'numeric'
        });
        $(this).text(formattedDate);
      }
    });
  }
  
  // 页面加载后立即更新一次
  updateAllTimezones();
  // 每秒更新一次时间
  setInterval(updateAllTimezones, 1000);
});

关键说明 #

1. 正确的时区标识符：使用IANA标准时区名（比如纽约是America/New_York，孟买是Asia/Kolkata），浏览器原生支持这些值，无需手动计算时区偏移。
2. 原生API避免bug：toLocaleString会自动处理日期切换、补零、AM/PM转换等边界情况，比手动拼接字符串可靠得多。
3. 可扩展性强：新增时区只需在HTML中添加对应的容器块，无需修改JavaScript代码。

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