12 小时 Javascript 时钟显示 24 时间，错误的 AM/PM

Question

我正在使用 js 渲染一个 12 小时的数字时钟，该时钟不断更新。 但是，我在网上找到的代码给我留下了 24 小时制和错误的 am/pm 输出。 现在它显示13:33 am 。 我在这里和那里尝试了其他代码片段，一些 jquery 示例，但没有任何效果，很多 css 已经进入了这个。 我如何将其转换为正常运行的 12 小时制？ 谢谢！

 $(document).ready(function() { setInterval(function() { // Create a newDate() object and extract the hours of the current time on the visitor's var hours = new Date().getHours(); // Add a leading zero to the hours value $(".hours").html((hours < 10 ? "0" : "") + hours); }, 1000); }); setInterval(function() { // Create a newDate() object and extract the minutes of the current time on the visitor's var minutes = new Date().getMinutes(); // Add a leading zero to the minutes value $(".min").html((minutes < 10 ? "0" : "") + minutes); }, 1000); setInterval(function() { var time = new Date().getHours(); var time = (time + 24 - 2) % 24; var mid = 'am'; if (time == 0) { //At 00 hours we need to show 12 am hours = 12; } else if (time > 12) { time = time % 12; mid = 'pm'; } $(".ap").html(mid); });

 ul { list-style: none; } li { display: inline-block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="clock"> <ul> <li class="hours"></li> <li class="point">:</li> <li class="min"></li> <li class="ap"></li> </ul> </div>

Answer 1

第一个问题是这一行：

var hours = new Date().getHours();

它需要从0到23的当前小时数。 例如：

 var hours = new Date('2020-01-01 16:00:00').getHours(); console.log(hours);

您需要使用模运算符将其转换为1 - 12范围：

 var hours = new Date('2020-01-01 16:00:00').getHours() % 12; console.log(hours);

唯一需要的是确保午夜显示为12 ：

 var hours = new Date('2020-01-01 00:00:00').getHours() % 12; if (hours === 0) { hours = 12; } console.log(hours);

第二个问题是在确定 AM 或 PM 时。

var time = (time + 24 - 2) % 24;

是错误的-2偏移使任何小时都不正确：

 var time = 16; time = (time + 24 - 2) % 24; console.log(time);

 var time = 1; time = (time + 24 - 2) % 24; console.log(time);

接下来，给小时加上 24 是没有用的。 最后，一旦移除+24偏移量，就不需要模 24 运算。 实际上，整条线都抛弃了所有计算。 您需要将其删除。

还有其他逻辑试图正确格式化小时数，但它放错了位置，因为此代码从未设置小时数 - 这已经在别处设置了。 此代码仅设置 AM/PM。

最后，第三个setInterval缺少间隔值。 从技术上讲，这仍然有效，但它会经常运行该功能。 基于其他setInterval调用，似乎意图是延迟1000 （以毫秒为单位）。

完成所有这些后，代码如下所示：

 $(document).ready(function() { setInterval(function() { // Create a newDate() object and extract the hours of the current time on the visitor's var hours = new Date().getHours() % 12; //At 00 hours we need to show 12 am if (hours === 0) { hours = 12 } // Add a leading zero to the hours value $(".hours").html((hours < 10 ? "0" : "") + hours); }, 1000); }); setInterval(function() { // Create a newDate() object and extract the minutes of the current time on the visitor's var minutes = new Date().getMinutes(); // Add a leading zero to the minutes value $(".min").html((minutes < 10 ? "0" : "") + minutes); }, 1000); setInterval(function() { var time = new Date().getHours(); var mid = 'am'; if (time > 12) { mid = 'pm'; } $(".ap").html(mid); }, 1000);

 li { display: inline-block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="clock"> <ul> <li class="hours"></li> <li class="point">:</li> <li class="min"></li> <li class="ap"></li> </ul> </div>

Answer 2

这是一个很有帮助的功能。 它以数字形式获取军用小时和分钟，并返回 12 小时时间组件（小时、分钟和上午/下午）的数组。

 function get12HourTimeComponents(hours, minutes) { minutes = (minutes < 10 ? "0" : "") + minutes; if (hours % 12 == 0) return [12, minutes, hours == 12 ? "pm" : "am"]; return [hours % 12, minutes, hours < 12 ? "am" : "pm"]; } console.log(get12HourTimeComponents(15, 23));

如果需要，第一行将前导 0 添加到分钟。 第二行专门处理小时为 0 或 12 的情况（因为它们不适用于第三行中的%运算符）。 第三行返回所有其他情况的数组，同时将小时转换为 12 小时格式并检查小时是否表示"am"或"pm" 。 要在您的代码中实现这一点，您可以这样做：

 function get12HourTimeComponents(hours, minutes) { minutes = (minutes < 10 ? "0" : "") + minutes; if (hours % 12 == 0) return [12, minutes, hours == 12 ? "pm" : "am"]; return [hours % 12, minutes, hours < 12 ? "am" : "pm"]; } function showTime() { var date = new Date(); var twelveHourTimeComponents = get12HourTimeComponents(date.getHours(), date.getMinutes()); $(".hours").html(twelveHourTimeComponents[0]); $(".min").html(twelveHourTimeComponents[1]); $(".ap").html(twelveHourTimeComponents[2]); } $(document).ready(function() { showTime(); //show time immediately when page loads setInterval(showTime, 1000); //and every second after that });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <div class="clock"> <ul> <li class="hours"></li> <li class="point">:</li> <li class="min"></li> <li class="ap"></li> </ul> </div>

我假设您有自己的 CSS 来设置样式，所以我不理会它。 你会注意到我去掉了一堆间隔。 你只需要一个。 您可以在一个时间间隔内每秒更新一次所有内容。 如果这还不够解释并且您有任何疑问，请通过发表评论让我知道。