Javascript JS：以特定格式显示不同时区

function showTime() {
  let date = new Date();
  let estDate = new Date(date.toLocaleString("en-US", {
    timeZone: "America/New_York"
  }));
  let pstDate = new Date(date.toLocaleString("en-US", {
    timeZone: "America/Los_Angeles"
  }));

  let formatNY = formatTime(estDate);
  let formatCA = formatTime(pstDate);

  // Output Times
  $('.time-ny').html(formatNY);
  $('.time-ca').html(formatCA);
}
// Created this method to format time.
function formatTime(date) {
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();
  let formatHours = convertFormat(hours);

  hours = checkTime(hours);
  hours = addZero(hours);
  minutes = addZero(minutes);
  seconds = addZero(seconds);

  return `${hours}:${minutes}:${seconds} <small class="font-medium">${formatHours}</small>`;
}

function convertFormat(time) {
  let format = 'AM';
  if (time >= 12) {
    format = 'PM';
  }
  return format;
}

function checkTime(time) {
  if (time >= 12) {
    time = time - 12;
  }
  if (time === 0) {
    time = 12;
  }
  return time;
}

function addZero(time) {
  if (time < 10) {
    time = "0" + time;
  }
  return time;
}

showTime();
setInterval(showTime, 1000);

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;
}

<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>

function showTime() {
  const date = new Date();
  const estDate = new Date(date.toLocaleString("en-US", {
    timeZone: "America/New_York"
  }));
  const pstDate = new Date(date.toLocaleString("en-US", {
    timeZone: "America/Los_Angeles"
  }));

  const formatNY = formatTime(estDate, 'NY');
  const formatCA = formatTime(pstDate, 'CA');

  // Output Times
  $('.time-ny').html(formatNY);
  $('.time-ca').html(formatCA);
}

function formatTime(date, label) {
  const timeFormatter = new Intl.DateTimeFormat('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: true,
  });

  const formattedTime = timeFormatter.format(date);
  const [time, period] = formattedTime.split(' ');

  return `${label} ${time} <small class="font-medium">${period}</small>`;
}

showTime();
setInterval(showTime, 1000);

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;
}

<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>