JS实现指定格式的EST/PST时区时间显示优化求助

需要实现严格按照「NY 11:24:21 PM」「CA 08:24:21 PM」格式显示美国东海岸（EST，对应时区America/New_York）、西海岸（PST，对应时区America/Los_Angeles）的当前时间，要求AM/PM包裹在<small>标签中，并正确渲染到对应HTML区块。

以下是修复后的完整代码：

JavaScript 代码 #

function showTime() {
    // 处理纽约（EST）时间
    const nyDate = new Date();
    const nyOptions = { timeZone: "America/New_York", hour12: true, hour: '2-digit', minute: '2-digit', second: '2-digit' };
    const nyTimeParts = nyDate.toLocaleTimeString("en-US", nyOptions).split(' ');
    const nyTime = nyTimeParts[0];
    const nyPeriod = nyTimeParts[1];
    
    const nyFormat = `NY ${nyTime} <small class="font-medium">${nyPeriod}</small>`;

    // 处理加州（PST）时间
    const caDate = new Date();
    const caOptions = { timeZone: "America/Los_Angeles", hour12: true, hour: '2-digit', minute: '2-digit', second: '2-digit' };
    const caTimeParts = caDate.toLocaleTimeString("en-US", caOptions).split(' ');
    const caTime = caTimeParts[0];
    const caPeriod = caTimeParts[1];
    
    const caFormat = `CA ${caTime} <small class="font-medium">${caPeriod}</small>`;

    // 渲染到对应区块
    $('.time-ny').html(nyFormat);
    $('.time-ca').html(caFormat);
}

// 初始化并每秒更新
showTime();
setInterval(showTime, 1000);

CSS 代码 #

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    flex-direction: column;
}

.clock {
    font-family: sans-serif;
    font-size: 1rem;
    color: #fff;
}

.font-medium {
    font-weight: 500;
}

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clock time-ny"></div>
<div class="clock time-ca"></div>

关键修改说明 #

• 直接使用toLocaleTimeString指定目标时区，确保时间严格对应EST/PST，避免本地时区干扰
• 通过拆分时间字符串，将AM/PM部分单独提取并包裹到<small>标签中，满足格式要求
• 移除原代码中存在逻辑错误的自定义格式化函数，改用原生API处理时间，减少出错概率
• 统一NY和CA的时间处理逻辑，保证显示格式完全一致

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