将小时添加到只显示时间和AM/PM的Date对象?

Question

如何将小时添加到日期对象?

这是一个时钟只提前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;
};

一小时后是:

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));

result
前:09:00 PM
后:10:00 PM

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日期有很多问题，并且不是很容易处理。有一个新的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}`);