JavaScript：使If陳述句在添加變數后調整為變數-有解無憂

我正在創建一個顯示世界時鐘的 HTML/JavaScript 頁面，但是我遇到了一個問題，時鐘沒有正確調整到 AM/PM，也沒有保持標準時間格式。我意識到這是因為使會話更改為 = '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>

uj5u.com熱心網友回復：

您可以將Intl.DateTimeFormat與各種選項一起使用，包括使用IANA 代表位置指定的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設定為 short 并不能可靠地回傳長時區名稱的縮寫。根據位置和語言，它可能會回傳縮寫或實際偏移量，如 UTC/GMT±HH:mm。因此，如果您想要縮寫的時區名稱，最好獲得全名并自己縮寫（這并不總是時區名稱的第一個字母，例如查塔姆標準時間是“ChSt”）。

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

您還可以嘗試在日期物件上使用getUTCHours()函式來標準化您從那里獲取和作業的時間。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/384793.html

標籤：javascript html 功能约会时间 if 语句

上一篇：如何跳過查詢selectorall不存在或為空

下一篇：在for回圈中為變數賦值