如何使用JS将网站活动时间自动转换为访客本地时区？

这个功能纯靠浏览器原生能力就能做，读取的是用户设备系统层面设置的默认时区，比通过IP定位推算时区的准确率高很多——IP定位经常会因为运营商路由问题出现时区偏差，但是读系统时区的话，和用户实际配置的本地时间完全一致。

• 第一步先把活动时间存成全球统一的时间锚点：你所在欧洲时区的晚8点活动，不要把不带时区的字符串（比如2024-10-01 20:00）直接存在前端代码或者数据库里，正确的存储格式要带上你当时的时区偏移，比如你在柏林夏令时（UTC+2）的晚8点，就存成带时区的ISO格式：2024-10-01T20:00:00+02:00，这个时间不管在哪个时区解析，对应的绝对时间点都不会变。
• 第二步自动获取访客的本地时区：不需要自己写逻辑算时差，直接调用浏览器原生API就能拿到用户的完整时区标识。
• 第三步把存储的活动时间按照访客的本地时区格式化，直接渲染到页面上就行，原生API会自动处理夏令时、不同国家的特殊时区规则，不需要自己维护复杂的时差表。

// 预先存储的活动绝对时间（你本地时区的晚8点）
const eventAnchorTime = new Date('2024-10-01T20:00:00+02:00');

// 自动获取访客设备设置的本地时区
const visitorTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

// 按访客的本地时区格式化成易读的时间字符串
const displayLocalTime = new Intl.DateTimeFormat('zh-CN', {
  timeZone: visitorTimezone,
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
  hour12: false
}).format(eventAnchorTime);

// 把生成的时间渲染到页面的活动时间元素里
document.querySelector('.event-start-time').textContent = `活动开始时间：${displayLocalTime}`;

实际运行效果：

• 来自上海的访客访问页面时，会自动看到适配本地时区的展示结果：2024年10月2日 02:00
• 来自纽约的访客访问页面时，会自动看到适配本地时区的展示结果：2024年10月1日 14:00

• 千万不要手动写时差计算逻辑：很多人会图省事，写代码算“我在UTC+2，用户在UTC+8，差6小时就把时间加6小时”，这种写法完全没有考虑夏令时切换、不同国家的历史时区调整，一到夏令时切换周期就会出现几小时的时间错位。用原生IntlAPI的话，这些规则都已经内置维护好了，不需要自己写兼容逻辑。
• 不要存不带时区标识的活动时间：如果只存“10月1日晚8点”这种不带时区的字符串，浏览器会默认按照访客自己的时区解析这个时间，完全达不到你预期的转换效果。
• 不需要额外做用户授权：获取设备时区的操作不需要申请任何权限，浏览器默认允许脚本读取这个系统配置，不会弹出授权提示打断用户体验。

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