将小时添加到仅显示时间和 AM/PM 的日期对象？

Question

如何将小时数添加到 Date 对象？

这只是一个提前 1 小时的时钟。可以根据您需要的任何小时数进行定制。

这适用于所有时区。

如果您想增加更多小时，只需更改每小时 0-23 的输出

```
 <script type="text/javascript">
window.onload = function () {
    DisplayCurrentTime();
};
function DisplayCurrentTime() {
    var date = new Date();
    var a = date.getHours() == 0 ? "1" : "" ;
    var b = date.getHours() == 1 ? "2" : "" ;
    var c = date.getHours() == 2 ? "3" : "" ;
    var d = date.getHours() == 3 ? "4" : "" ;
    var e = date.getHours() == 4 ? "5" : "" ;
    var f = date.getHours() == 5 ? "6" : "" ;
    var g = date.getHours() == 6 ? "7" : "" ;
    var h = date.getHours() == 7 ? "8" : "" ;
    var i = date.getHours() == 8 ? "9" : "" ;
    var j = date.getHours() == 9 ? "10" : "" ;
    var k = date.getHours() == 10 ? "11" : "" ;
    var l = date.getHours() == 11 ? "12" : "" ;
    var m = date.getHours() == 12 ? "1" : "" ;
    var n = date.getHours() == 13 ? "2" : "" ;
    var o = date.getHours() == 14 ? "3" : "" ;
    var p = date.getHours() == 15 ? "4" : "" ;
    var q = date.getHours() == 16 ? "5" : "" ;
    var r = date.getHours() == 17 ? "6" : "" ;
    var s = date.getHours() == 18 ? "7" : "" ;
    var t = date.getHours() == 19 ? "8" : "" ;
    var u = date.getHours() == 20 ? "9" : "" ;
    var v = date.getHours() == 21 ? "10" : "" ;
    var w = date.getHours() == 22 ? "11" : "" ;
    var x = date.getHours() == 23 ? "12" : "" ;

    var am = date.getHours() <= 10 ? "AM" : "";
    var pm = date.getHours() == 11 ? "PM" : "";
  var pma = date.getHours() == 12 ? "PM" : "";
  var pmb = date.getHours() == 13 ? "PM" : "";
  var pmc = date.getHours() == 14 ? "PM" : "";
  var pmd = date.getHours() == 15 ? "PM" : "";
  var pme = date.getHours() == 16 ? "PM" : "";
  var pmf = date.getHours() == 17 ? "PM" : "";
  var pmg = date.getHours() == 18 ? "PM" : "";
  var pmh = date.getHours() == 19 ? "PM" : "";
  var pmi = date.getHours() == 20 ? "PM" : "";
  var pmj = date.getHours() == 21 ? "PM" : "";
  var pmk = date.getHours() == 22 ? "PM" : "";
  var ama = date.getHours() == 23 ? "AM" : "";

  var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();


  
    time = a + b + c + d + e + f + g + h + i + j + k + l + m + n + o + p + q + r + s + t + u + v + w + x + ":" + minutes + " " + am + pm + pma + pmb + pmc + pmd + pme + pmf + pmg + pmh + pmi + pmj + pmk + ama;
    var lblTime = document.getElementById("lblTime");
    lblTime.innerHTML = time;
};

一小时后是：<span id='lblTime'>

Answer 1

为什么你的逻辑很复杂。这是一个简单的代码兄弟。

var datetime = new Date();
const timeFormat = { hour: '2-digit', minute: '2-digit'}
console.log("Before: ", datetime.toLocaleTimeString('en-US', timeFormat));

//ADD n Hour
datetime.setHours(datetime.getHours()+1); 
console.log("After: ", datetime.toLocaleTimeString('en-US', timeFormat));

结果
之前：晚上 09:00
之后：晚上 10:00

Answer 2

您可以为此使用组合多个功能

像这样

const addHours = (date, hours) => 
 new Date(date.getTime() + 3600 *1000 * hours)

const formatDate = date => {
  const hour = date.getHours()
  const minutes = date.getMinutes()
  const isAm = hour < 13
  return `${(isAm? hour: hour - 12).toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')} ${isAm? 'AM': 'PM'}`
}

const addHourAndFormat = (date, hours) => formatDate(addHours(date, hours))

const date1 = new Date('2022-11-15 14:54:00')
const date2 = addHours(date1, 5)

console.log(formatDate(date1))
console.log(formatDate(date2))

console.log(addHourAndFormat(date1, 13))

Answer 3

有许多库可以为您完成此任务。 date-fns 是一个。例如，函数https://date-fns.org/v2.29.3/docs/intlFormat。 JavaScript Dates 有很多问题，并且不是很容易使用。有一个新的api 正在处理这些问题。

对于将一个小时添加到日期的相对简单的实现，这应该可以解决问题：

如MDN所述：

Date 对象包含一个 Number 表示从 1 开始的毫秒数 1970 年 1 月 UTC。

valueOf 函数将返回 Date 对象的毫秒表示。添加您感兴趣的毫秒数（在本例中为 60（小时中的分钟）* 60（分钟中的秒）* 1000（秒中的毫秒）），然后将该数字传递给日期构造函数。

const date = new Date(Date.now());
const hourInMilliseconds = 60 * 60 * 1000;
const datePlusHour = new Date(date.valueOf() + hourInMilliseconds);

const dateHour = datePlusHour.getHours();
const amPmString = Math.floor(dateHour / 12) > 0 ? 'PM' : 'AM';
let dateHourString;
if (dateHour === 0) {
  dateHourString = '12';
} else {
  const twelveHour = dateHour % 12;
  dateHourString = (twelveHour < 10 ? '0' : '') + twelveHour;
}

const dateMinuteString = (datePlusHour.getMinutes() < 10 ? '0' : '') + datePlusHour.getMinutes();
console.log(date, datePlusHour);
console.log(`${dateHourString}:${dateMinuteString} ${amPmString}`);