JavaScript：在添加变量后使 If 语句调整到变量

Question

我正在创建一个显示世界时钟的 HTML/JavaScript 页面，但是我遇到了一个问题，即时钟没有正确调整到上午/下午，也没有保持标准时间格式。我意识到这是因为使会话更改为 = 'PM' 的 if 语句仅适用于它获得的时区。此外，我的代码仅获取时间并将其放入加利福尼亚插槽，因为那是我所在的时区，因此如果您在太平洋时间以外的时区打开此代码，所有世界时钟都将不正确。是否可以将我的时钟保持为标准时间格式并且是正确的 AM 或 PM？

let clock = document.getElementById('clock');

function currentTime() {

  let date = new Date();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();
  let session = 'AM';

  if (hours == 0) {
    hours = 12
  }
  if (hours > 12) {
    hours = hours - 12
    session = 'PM'
  }

  minutes = (minutes < 10) ? "0" + minutes : minutes;
  seconds = (seconds < 10) ? "0" + seconds : seconds;

  let time = hours + ':' + minutes + ' ' + session;
  document.getElementById('clock').innerText = time;

  let york = (hours + 3) + ':' + minutes + ' ' + session;
  document.getElementById('york').innerText = york;

  let hawaii = (hours - 2) + ':' + minutes + ' ' + session;
  document.getElementById('hawaii').innerText = hawaii;

  let dubai = (hours + 12) + ':' + minutes + ' ' + session;
  document.getElementById('dubai').innerText = dubai;

  document.getElementById('seconds').innerText = ':' + seconds;

  let london = (hours + 8) + ':' + minutes + ' ' + session;
  document.getElementById('london').innerText = london;

  let moscow = (hours + 12) + ':' + minutes + ' ' + session;
  document.getElementById('moscow').innerText = moscow;

  let paris = (hours + 9) + ':' + minutes + ' ' + session;
  document.getElementById('paris').innerText = paris;

  let tokyo = (hours + 17) + ':' + minutes + ' ' + session;
  document.getElementById('tokyo').innerText = tokyo;

  let t = setTimeout(function() {
    currentTime()
  }, 1000);
}

currentTime();

p {line-height: 0.5em}

<div id="container">
  <div id="clockContainer">
    <div id="titleContainer">
      <p id="title">California <span id="clock" class='clock'></p>
    </div>
    <div id="titleContainer">
      <p id="title">New York <span id="york" class='clock'></p>
    </div>
    <div id="titleContainer">
      <p id="title">Hawaii <span id="hawaii" class='clock'></p>
    </div>
  </div>
  <div id="clockContainer">
    <div id="titleContainer">
      <p id="title">Dubai <span id="dubai" class='clock'></p>
    </div>
    <div id="titleContainer">
      <p id="title">Seconds <span id="seconds" class='clock'></p>
    </div>
    <div id="titleContainer">
      <p id="title">London <span id="london" class='clock'></p>
    </div>
  </div>
  <div id="clockContainer">
    <div id="titleContainer">
      <p id="title">Tokyo <span id="tokyo" class='clock'></p>
    </div>
    <div id="titleContainer">
      <p id="title">Paris <span id="paris" class='clock'></p>
    </div>
    <div id="titleContainer">
      <p id="title">Moscow <span id="moscow" class='clock'></p>
    </div>
  </div>
</div>

Answer 1

您可以将Intl.DateTimeFormat 与各种选项一起使用，包括使用IANA representative location 指定的timeZone。您还可以使用formatToParts 获取组件，然后按照您喜欢的方式格式化它们，包括 12/24 小时时间和上午/下午，例如

function formatDate(date, loc) {
  let f = new Intl.DateTimeFormat('en',{
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour12: true,
    hour: '2-digit',
    minute: '2-digit',
    timeZone: loc,
    timeZoneName: 'long'
  });
  let {year, month, day, hour, minute, dayPeriod, timeZoneName} = f.formatToParts(date).reduce((parts, part) => {
    parts[part.type] = part.value;
    return parts;
  }, Object.create(null));
  
  return `${day} ${month} ${year} ${hour}:${minute} ${dayPeriod.toLowerCase()} ${timeZoneName}`;
}

let d = new Date();
document.querySelectorAll('.clockTime').forEach(el =>
  el.textContent = formatDate(d, el.dataset.loc)
);

body {
  font-family: sans-serif;
}
th {
  text-align: left;
}

<table>
  <tr>
    <th>Place<th>Date and time
  <tr>
    <td>Kiritimati <td class="clockTime" data-loc="Pacific/Kiritimati">
  <tr>
   <td>Lord Howe Is <td class="clockTime" data-loc="Australia/Lord_Howe">
  <tr>
   <td>India <td class="clockTime" data-loc="Asia/Kolkata">
  <tr>
    <td>Dubai <td class="clockTime" data-loc="Asia/Dubai">
  <tr>
    <td>London <td class="clockTime" data-loc="Europe/London">
  <tr>
   <td>Los Angeles <td class="clockTime" data-loc="America/Los_Angeles">
  <tr>
   <td>Midway Is<td class="clockTime" data-loc="Pacific/Midway">
</table>

唯一真正的问题是将 timeZoneName 设置为短时区名称并不能可靠地返回长时区名称的缩写。根据位置和语言，它可能会返回缩写或实际偏移量为 UTC/GMT±HH:mm。因此，如果您想要缩写的时区名称，最好自己获取全名并缩写（这并不总是时区名称的第一个字母，例如 Chatham Standard Time 是“ChSt”）。

Answer 2

试试moment js库。

它将帮助您进行日期、时间管理、表格、计算等等。

祝你好运。

moment().format('MMMM Do YYYY, h:mm:ss a'); // December 17th 2021, 2:54:05 pm
moment().format('dddd');                    // Friday
moment().format("MMM Do YY");               // Dec 17th 21
moment().format('YYYY [escaped] YYYY');     // 2021 escaped 2021
moment().format();                          // 2021-12-17T14:54:05+09:00

https://momentjs.com/

Answer 3

您还可以尝试在日期对象上使用getUTCHours() 函数来标准化您从那里获取和工作的时间。

AM/PM 开关不适合您的原因是因为您只是在检查初始 hours 值。您应该检查所需的每个时区，并相应地添加 AM 或 PM 后缀。
例如：let york = (hours + 3) + ':' + minutes + ' ' + (hours + 3 > 12 ? "PM" : "AM");

我希望这会有所帮助。