修复网页固定时区时钟JS代码的Dreamweaver报错问题

原代码存在两类问题，一是语法不规范触发IDE校验报错，二是时间获取逻辑有缺陷——你当前在德国本地打开能看到正确时间，本质是因为你自己设备的时区是德国时区，其他地区访客访问时，代码会读取访客设备的本地时间，无法固定显示你所在时区的时间。

以下是修复后的完整代码，既消除了Dreamweaver的语法报错，也实现了全局固定时区显示的需求，同时自动适配德国夏令时/冬令时切换，不需要手动调整时间偏移：

首先在页面需要显示时间的位置放置容器：

<div id="ct7"></div>

然后放置JS代码：

// 配置项：需要显示的目标时区，德国对应Europe/Berlin
const TARGET_TIMEZONE = 'Europe/Berlin';
const timeElement = document.getElementById('ct7');
let refreshTimer = null;

// 数字补零工具函数
const padZero = (num) => num.toString().padStart(2, '0');

// 更新时间显示
const updateTime = () => {
  const now = new Date();
  // 按指定时区格式化时间
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: TARGET_TIMEZONE,
    hour12: true,
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit'
  });
  const timeParts = formatter.formatToParts(now).reduce((res, part) => {
    res[part.type] = part.value;
    return res;
  }, {});
  // 拼接为原代码一致的 HH:MM:SS am/pm 格式
  timeElement.innerHTML = `${padZero(timeParts.hour)}:${timeParts.minute}:${timeParts.second} ${timeParts.dayPeriod.toLowerCase()}`;
};

// 启动时钟
const startClock = () => {
  updateTime();
  // 每秒刷新，用函数引用替代过时的字符串传参，消除语法报错
  refreshTimer = setInterval(updateTime, 1000);
};

// 等待DOM加载完成后初始化，避免找不到元素报错
if (document.readyState !== 'loading') {
  startClock();
} else {
  document.addEventListener('DOMContentLoaded', startClock);
}

优化点说明 #

• 消除所有语法报错：所有变量显式声明，移除隐式全局变量，替换setTimeout传字符串的过时写法，符合ES6+语法规范，Dreamweaver不会再提示错误
• 修复时区逻辑：无论访客所在地区时区是什么，都会固定显示配置的目标时区时间，德国时区自动适配冬夏令时切换，无需手动调整UTC偏移
• 体验优化：页面打开后立即显示时间，无需等待1秒；增加DOM加载判断，避免元素未渲染完成时执行代码报错
• 格式完全兼容：和你原有代码的显示效果完全一致，采用12小时制、时分秒自动补零、带am/pm后缀
• 易维护：仅需修改TARGET_TIMEZONE的值即可切换显示的时区，无需改动其他逻辑

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