如何以12小时AM/PM格式显示JavaScript日期时间

在进行高效的时间分析时，显示日期时间的最实用方法是使用12小时am/pm格式。此外，该方法清楚地区分了早上和晚上。例如，“am/pm”都指定了一定时间段，并使人们更容易理解时间，这在24小时格式下不是这样的。

本文将解释显示JavaScript日期时间以12小时am/pm格式的方法。

在12小时am/pm格式下显示JavaScript日期时间

让我们逐个了解更多有关在12小时am/pm格式下显示JavaScript日期时间的内容。我们可以从当前日期时间中提取小时和分钟。如果小时值大于12，则为PM，否则为AM。

使用toLocaleString()方法

toLocaleString()方法返回一个字符串，表示根据正在使用的语言表示日期。计算机上的区域设置确定默认语言。

语法

以下是toLocaleString()的语法 –

Date.toLocaleString(locales, options)

示例

在下面的示例中，我们正在创建一个新的日期对象，并使用US语言格式应用toLocalString()方法，并将其值分配为其参数的时间值。我们使用了hour12来指示时间应以12小时格式显示。

<!DOCTYPE html>
<html>
   <body>
      <script>
         var time = new Date();
         document.write(time.toLocaleString('en-US', {
            hour: 'numeric',
            minute: 'numeric',
            hour12: true
         }));
      </script>
   </body>
</html>

当执行脚本时，将生成一个由脚本执行触发的事件导致以12小时格式am/pm显示的时间的输出。

示例

考虑下面的例子，在这里我们正在创建一个新的日期对象，并应用toLocalString()，并在Web页面上以12小时格式（am/pm）以及完整日期的形式输出。

<!DOCTYPE html>
<html>
   <body>
      <button onclick="displaydatetime()">Click</button>
      <p id="tutorial"></p>
      <script>
         function displaydatetime() {
            var x = new Date();
            var y = x.toLocaleString([], {
               hour12: true
            });
            document.getElementById("tutorial").innerHTML = y;
         }
      </script>
   </body>
</html>

运行上述脚本时，输出窗口将弹出，在Web页面上显示点击按钮。当用户单击按钮时，事件被触发，并在Web页面上以12小时am/pm格式显示日期时间。

示例

执行下面的命令以以12小时am/pm格式获取JavaScript日期时间。

<!DOCTYPE html>
<html>
   <body>
      <p id="tutorial"></p>
      <script>
         const date = new Date();
         document.getElementById("tutorial").innerHTML = date.toLocaleString();
      </script>
   </body>
</html>

当您运行上述脚本时，输出窗口将弹出，触发事件并在Web页面上显示12小时am/pm格式的日期时间。

使用内联函数

可以通过将条件运算符应用于日期时间的am/pm格式来实现此目的。

示例

让我们看一下以下示例，这里我们正在创建一个名为dateTimeformat()的内联函数，并创建一个变量x，根据小时的值来分配am或pm。我们使用％运算符将小时转换为12小时制的格式。

<!DOCTYPE html>
<html>
   <body>
      <script>
         const dateTimeformat = (date) => {
            let hours = date.getHours();
            let minutes = date.getMinutes();
            let x = hours >= 12 ? 'pm' : 'am';
            hours = hours % 12;
            hours = hours ? hours : 12;
            minutes = minutes.toString().padStart(2, '0');
            let mergeTime = hours + ':' + minutes + ' ' + x;
            return mergeTime;
         }
         document.write(dateTimeformat(new Date()));
      </script>
   </body>
</html>