如何以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>
当脚本执行时,事件被触发,并在网页上以12小时的am/pm格式显示时间。