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

Posted 2023-02-19

【中文标题】JavaScript：在添加变量后使 If 语句调整到变量

【英文标题】：JavaScript: Making an If statement adjust to a variable after adding to it

【发布时间】：2022-01-20 03:07:02

【问题描述】：

我正在创建一个显示世界时钟的 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>

【参考方案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”）。

【参考方案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/

【讨论】：

来自 momentJS 站点：momentjs.com/docs 和 dockyard.com/blog/2020/02/14/… 他们不再推荐使用 moment。而是看看在第一个链接中使用替代品

【参考方案3】：

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

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

我希望这会有所帮助。

【讨论】：

这如何帮助 OP 确定在特定位置是上午还是下午？

@RobG 它没有，但它有助于 OP 标准化时间，以便它始终如一地出现在任何地方。 OP - 你可以这样做：let york = (hours + 3) + ':' + minutes + ' ' + (hours + 3 > 12 ? "PM" : "AM"); 它应该会给你想要的效果。编辑：AM/PM 不起作用的原因是，如果初始 hours 变量 > 12，您只更改会话。您必须在每种情况下检查它，以便正确应用它。

您应该将该评论放入答案中。