求助：实现带12小时制AM/PM的EST时区实时时钟及营业时间展示

先调整HTML结构（新增AM/PM显示元素） #

原HTML缺少AM/PM的显示位置，先补充：

<section>
  <div class="clock">
    Business hours
    <span id="hours">h</span>
    <span id="colon">:</span>
    <span id="minutes">m</span>
    <span id="ampm">AM</span> <!-- 新增AM/PM显示区 -->
  </div>
</section>

原生JS实现（无需第三方库，适合新手） #

利用浏览器原生的Intl.DateTimeFormatAPI，直接处理时区和12小时制格式化，自动适配EST/EDT夏令时切换，代码简洁易维护：

// 获取页面上的时间元素
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const ampmEl = document.getElementById('ampm');

// 更新EST时间的核心函数
function updateESTTime() {
  // 配置格式化规则：指定EST时区（America/New_York自动覆盖EST/EDT）、12小时制、两位数时分
  const formatOptions = {
    timeZone: 'America/New_York',
    hour12: true,
    hour: '2-digit',
    minute: '2-digit'
  };

  // 生成格式化后的时间字符串
  const timeStr = new Intl.DateTimeFormat('en-US', formatOptions).format(new Date());
  
  // 拆分出时分和AM/PM部分
  const [timeSegment, ampmSegment] = timeStr.split(' ');
  const [currentHours, currentMinutes] = timeSegment.split(':');

  // 更新页面显示
  hoursEl.textContent = currentHours;
  minutesEl.textContent = currentMinutes;
  ampmEl.textContent = ampmSegment;
}

// 页面加载时立即执行一次，避免初始占位符显示
updateESTTime();
// 每秒更新一次时间，保持实时性
setInterval(updateESTTime, 1000);

更可靠的进阶实现（避免字符串拆分） #

如果担心不同浏览器的时间字符串格式差异，可以用formatToParts方法直接提取时间组件：

function updateESTTime() {
  const now = new Date();
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: 'America/New_York',
    hour12: true,
    hour: '2-digit',
    minute: '2-digit'
  });

  // 解析出时间的各个组成部分
  const timeParts = formatter.formatToParts(now);
  
  // 筛选出需要的时分和AM/PM
  const hours = timeParts.find(part => part.type === 'hour').value;
  const minutes = timeParts.find(part => part.type === 'minute').value;
  const ampm = timeParts.find(part => part.type === 'dayPeriod').value;

  // 更新DOM
  hoursEl.textContent = hours;
  minutesEl.textContent = minutes;
  ampmEl.textContent = ampm;
}

可选CSS优化（美化AM/PM显示） #

给新增的AM/PM元素加一点样式，让布局更协调：

#ampm {
  margin-left: 0.5rem;
  font-size: 0.8em;
  opacity: 0.8;
}

方案优势 #

• 纯原生实现，不用引入Moment.js或其他库，减少依赖
• 自动处理夏令时切换（America/New_York时区会自动在EST和EDT之间切换）
• 代码逻辑清晰，新手容易理解和修改

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