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

Question

好吧，我正在为一个新网站开发一个功能，我需要显示东海岸和西海岸的当前时间。需要按以下方式显示： 纽约 11:24:21 下午 加州 08:24:21 PM

到目前为止，我已经设法开始显示时区，但我需要确保它们都专门指向 EST 和 PST，并且它们显示在正确的 html 块内。我还需要将 AM/PM 包裹在 html 块内。

这是我的示例代码：

function showTime() {
    let date = new 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)
    let format = `NY ${hours}:${minutes}:${seconds} <small class="font-medium">${formatHours}</small>`
    let pstDate = date.toLocaleTimeString("en-US", {timeZone: "America/Los_Angeles"}, {timeStyle: 'short'})

    // Output Times
    $('.time-ny').html(format);
    $('.time-ca').html(pstDate);
}

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

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>

我们将非常感谢真正的 JS 编码人员提供的任何帮助。我涉足这些东西，但它永远不会成为我的面包和黄油。

Answer 1

您的代码需要进行两项调整才能使其正常工作：

1. 使用 HTML 块中包含的 AM/PM 格式化时间字符串。
2. 使用

   toLocaleString()

   方法获取东海岸和西海岸时间，然后将其传递给格式化时间字符串的函数（上面第 1 点中提到的）。

示例如下：

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>