如何显示当前时间和日期html

Question

我试图在我的网站上显示当前时间和日期，但遇到了问题，因为我需要以某种方式显示，并提前一个小时添加。

对于第一个，我需要它显示如下：

20 Sep 2022 *current time* (12-hour format with am and pm)

第二个：

20 Sep 2022 *current time +1hr* (12-hour format with am and pm)

我尝试了Codepen的这个代码，但我需要在日期之后显示时间，出于某种原因，它在我的网站上也显示为短日期。

function DateAndTime() {
var dt = new Date();
var Hours = dt.getHours();
var Min = dt.getMinutes();
var Sec = dt.getSeconds();
var days = [
"",
"",
"",
"",
"",
"",
""
];
//strings
var months = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"June",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
];
if (Min < 10) {
Min === "0" + Min;
} //displays two digits even Min less than 10
if (Sec < 10) {
Sec === "0" + Sec;
} //displays two digits even Sec less than 10
var suffix = "AM"; //cunverting 24Hours to 12Hours with AM & PM suffix
if (Hours >= 12) {
suffix = "PM";
Hours = Hours - 12;
}
if (Hours === 0) {
Hours = 12;
}
document.getElementById("time").innerHTML =
Hours + "Hours : " + Min + "Min : " + Sec + "Sec " + suffix + ".";
document.getElementById("date").innerHTML =
days[dt.getDay()] +
", " +
dt.getDate() +
" " +
months[dt.getMonth()] +
" " +
dt.getFullYear();
}
new DateAndTime();
setInterval("DateAndTime()", 1000);

上面的代码显示如下：

7Hours : 9Min : 47Sec PM.
, 20 Sep 2022 

我需要像这个一样显示

20 Sep 2022 7:10 pm
20 Sep 2022 8:10 pm (one hour added to current time)

我对编码还很陌生，所以很抱歉，如果这是一个简单的问题，试图编辑Codepen的代码似乎总是把一件事或另一件事搞砸。

谢谢。

Answer 1

您实际上可以使用JavaScript中的toLocaleDateString()方法获得(几乎完全是(您想要的结果。这本质上是基于Date对象吐出一个日期字符串，您可以传入更改日期/时间格式的选项。

MDN Web文档有更深入的解释，但您只需输入日期的区域设置，然后输入如何格式化日期各部分的任何选项。

const _DateAndTime = () => {
document.querySelector("#currentTime").innerHTML = new Date().toLocaleDateString('en-gb', {year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true});
document.querySelector("#futureTime").innerHTML = new Date(Date.now()+36e5).toLocaleDateString('en-gb', {year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true});
}
setInterval(_DateAndTime, 60000);
_DateAndTime();

<div id="currentTime"></div>
<div id="futureTime"></div>

票据

我使用en-gb区域设置，因为它使用dd/mm/yyyy格式，而en-us使用mm/dd/yyyy。可能还有其他地区可以用来将月份显示为Sep，而不是Sep，但它已经足够接近我认为没有问题的地方了。

Answer 2

/**
* Get am or pm based on hour
* @param {number} hour
* @returns {string} am or pm
*/
function getAmPm(hour) {
return hour >= 12 ? "pm" : "am";
}
/**
* Get hour in 12 hour format
* @param {number} hour
* @returns {number} hour in 12 hour format
*/
function getHour12(hour) {
return hour % 12 || 12;
}
/**
* Get the currentDate and currentDate plus 1 hour
* @returns {{ currentDate: string, currentDatePlus1Hour: string }}
*/
function getDateAndTime() {
const date = new Date();
const months = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
const day = date.getDate();
const month = date.getMonth();
const year = date.getFullYear();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
const hourPlusOne = hour + 1;
const currentDate = `${day} ${months[month]} ${year} ${getHour12(
hour
)}:${minute}:${second} ${getAmPm(hour)}`;
const currentDatePlus1Hour = `${day} ${months[month]} ${year} ${getHour12(
hourPlusOne
)}:${minute}:${second} ${getAmPm(hourPlusOne)}`;
return { currentDate, currentDatePlus1Hour };
}
console.log(getDateAndTime());