网页实时显示英国本地时间（自动切换夏令时）

使用 JavaScript 的 Intl.DateTimeFormat API 可以精准、可靠地实时显示英国（Europe/London）时区时间，自动适配 GMT/BST 切换，并避免页面加载时的时间“闪现”问题。

推荐方案：原生 Intl.DateTimeFormat 实现英国时间实时显示

要在静态网站中稳定、准确地显示实时英国时间（自动识别夏令时 BST 或标准时间 GMT），现代浏览器原生支持的 Intl.DateTimeFormat API 是最佳选择。该 API 底层基于 IANA 时区数据库，无需第三方库即可智能处理英国每年3月最后一个周日切换至 BST、10月最后一个周日退回 GMT 的规则。

精简且健壮的实现代码

以下为经过验证的完整实现方案，可直接嵌入页面：

const timeSpan = document.getElementById("date");
// 配置英国本地化格式：短星期名 + 12小时制时间 + 时区缩写（BST/GMT）
const ukOptions = {
  weekday: 'short',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: true,
  timeZone: 'Europe/London',
  timeZoneName: 'short'
};
const updateUKTime = () => {
  const now = new Date();
  timeSpan.textContent = now.toLocaleString('en-GB', ukOptions);
};
// 立即执行一次（避免首屏空白或延迟渲染）
updateUKTime();
// 每秒更新（注意：实际精度受 setInterval 限制，但对人眼显示完全足够）
setInterval(updateUKTime, 1000);

核心优势解析

• 自动时区切换：通过 timeZone: 'Europe/London'，浏览器底层自动判断当前为 GMT 还是 BST，无需手动计算或维护切换规则。
• 消除时间跳入问题：updateUKTime() 立即执行首次渲染，页面加载完成时时间即显示，不会出现空白瞬间。
• 语义清晰可读性强：toLocaleString('en-GB', opts) 返回符合英国习惯的格式，例如 Wed, 3:45:22 PM BST，直观易懂。
• 兼容性良好：Chrome 24+、Firefox 29+、Safari 10+、Edge 12+ 均支持此 API。如需兼容 IE，可引入 formatjs polyfill。

注意事项与最佳实践

• 切勿依赖 new Date().getHours() 等本地时间方法进行手动偏移——这样会受到用户系统时区设置错误、设备时间不准或跨时区访问的影响，导致结果显示错误。
• setInterval(..., 1000) 是实用的折中方案。若需严格毫秒级同步，可结合 requestAnimationFrame 或服务端时间校准，但对静态网站而言，每秒更新足以满足用户需求。
• 若仅需显示纯 UTC/GMT 时间（24小时制、无夏令时），可改用 timeZone: 'UTC' 并设置 hour12: false，更简洁可靠，无需用正则解析 toUTCString()。

最终效果示例（动态更新）

Thu, 2:18:45 PM BST（夏季）
Sat, 1:55:03 PM GMT（冬季）

该方案轻量、标准、可维护，为静态网站提供了零依赖、高可靠性的用户体验，是目前最干净的实现方式。