如何让 AM/PM 在 Javascript 中随时间正常工作答案

【问题标题】：How to get AM/PM work correctly with time in Javascript如何让 AM/PM 在 Javascript 中随时间正常工作
【发布时间】：2017-12-27 17:54:57
【问题描述】：

我有这个用于显示时间（根据时区）和日期的 Javascript 代码，但问题在于 AM/PM。它不会随着时间的变化而自动更新；经过多次尝试，我未能自动更新，因此在这里寻求帮助。下面是代码：

$(document).ready(function(){
// Create two variable with the names of the months and days in an array
// Count 3 variable for months
var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]; 
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

// Create a newDate() object
var newDate = new Date();
// Extract the current date from Date object
newDate.setDate(newDate.getUTCDate());
// Output the day, date, month and year   
$('#Date').html(/*dayNames[newDate.getUTCDay()] + " " + */monthNames[newDate.getMonth()] + ' ' + newDate.getDate() + ', ' + newDate.getFullYear());

setInterval( function() {
  // Create a newDate() object and extract the seconds of the current time on the visitor's
  var seconds = new Date().getUTCSeconds();
  // Add a leading zero to seconds value
  $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
  },1000);

setInterval( function() {
  // Create a newDate() object and extract the minutes of the current time on the visitor's
  var minutes = new Date().getUTCMinutes();
  // Add a leading zero to the minutes value
  $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
  },1000);

setInterval( function() {
  // Create a newDate() object and extract the hours of the current time on the visitor's
  var hours = new Date().getUTCHours();
    var ampm    = 'AM';
if(hours > 5)
{
    hours -= 5; // Time Zone
    ampm = 'AM'; // AM/PM According to Time Chosen
}
    else if(hours == 5)
{
    ampm = 'PM';    
};

  // Add a leading zero to the hours value
  $("#hours").html(( hours < 10 ? "0" : "" ) + hours);

  $("#ampm").html(ampm);
  }, 1000); 
});

<span id="hours"></span>:<span id="min"></span>&nbsp;<span id="ampm"></span>&nbsp;&nbsp;<span id="Date"></span>

【问题讨论】：

请注意，newDate.setDate(newDate.getUTCDate()); 可能会更改日期，因为 UTC 日期并不总是与本地日期相同。为什么要使用 UTC 值然后减去 5？您是否尝试将日期设置为不同的时区？已经有很多问题了。

标签： javascript date time format

【解决方案1】：

我不太确定您要做什么，但如果您尝试使用主机系统设置 UTC-0500 时区，然后以特定格式显示日期和时间，有很多问题已经在这里了。

一种简单的方法是获取主机日期，根据主机时区偏移量移动时间并补偿您的默认 5 小时。然后适当地格式化时间。时间以分钟为单位进行调整，因为这就是 getTimezoneOffset 返回的内容，适合偏移量甚至不是几小时的情况。

调整日期后，设置上午/下午很简单：

var ampm = d.getHours() < 12? 'am' : 'pm';

根据需要经常调用该函数以显示当前时间。

// Return a date adjusted to UTC-0500
function getOffsetDate() {
  var d = new Date();
  // Set to UTC-0500: add timzone offset then subtract 300 mins
  d.setMinutes(d.getMinutes() + d.getTimezoneOffset() - 300);
  return d;
}

// Format time as hh:mm:ss ap 
function formatTime(d) {
  function z(n){return (n<10? '0' : '') + n}
  var ap = d.getHours() < 12? 'am' : 'pm';
  return z(d.getHours()) + ':' + z(d.getMinutes()) + ':' +
         z(d.getSeconds()) + ' ' + ap;
}

function showTime() {
  // Delay to just after next full second
  var delay = 1020 - new Date().getMilliseconds();
  // Show time
  document.getElementById('time').textContent = formatTime(getOffsetDate());
  // Call again
  setTimeout(showTime, delay);
}

showTime();

&lt;div&gt;The time in timezone UTC-0500 is &lt;span id="time"&gt;&lt;/span&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

也许一些图书馆会让你的生活更轻松

https://momentjs.com/timezone/

我不想自己写，但这绝对是个好习惯这正是您想要的，我认为并继续调用 setInterval 中的时间来更新时间。

【讨论】：

这应该是评论，不是答案。