如何在 js 时钟中添加刷新间隔

Question

尝试这段代码，但我无法使秒数实时更新，我不是开发人员，所以我正在努力解决这个问题，有什么问题，所以时钟可以实时刷新？

function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('formatAMPM()',refresh)
}
document.getElementById("time").innerHTML = formatAMPM(); display_c();
function formatAMPM() {
var d = new Date(),
		seconds = d.getSeconds().toString().length == 1 ? '0'+d.getSeconds() : d.getSeconds(),
minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes(),
hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
ampm = d.getHours() >= 12 ? 'pm' : 'am',
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+' '+d.getFullYear()+' '+hours+':'+minutes+':'+seconds;
}

<p id="time"></p>

Answer 1

您使用的是 setTimeout 而不是 setInterval。 setTimeout 将在执行前等待 x 时间，而 setInterval 将每 x 秒执行一次。

你也把时间写一次到dom。我将其移动到 setInterval 中，以便它在获得新时间后更新 dom。

var timeNode = document.getElementById("time");
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setInterval(function() {
timeNode.innerHTML = formatAMPM();
},refresh)
}
display_c();
function formatAMPM() {
var d = new Date(),
		seconds = d.getSeconds().toString().length == 1 ? '0'+d.getSeconds() : d.getSeconds(),
minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes(),
hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
ampm = d.getHours() >= 12 ? 'pm' : 'am',
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];

return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+' '+d.getFullYear()+' '+hours+':'+minutes+':'+seconds;
}

<p id="time"></p>

Answer 2

您正在寻找 setInterval 而不是 setTimeout。代码有点混乱，但这里有一个快速修复：

var refresh=1000; // Refresh rate in milli seconds
setInterval(display_c ,refresh);
function display_c() { 
document.getElementById("time").innerHTML = formatAMPM()
}
function formatAMPM() {
var d = new Date(),
	 seconds = d.getSeconds().toString().length == 1 ? '0'+d.getSeconds() : d.getSeconds(),
minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes(),
hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
ampm = d.getHours() >= 12 ? 'pm' : 'am',
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+' '+d.getFullYear()+' '+hours+':'+minutes+':'+seconds;
}

<p id="time"></p>

Answer 3

您显示的大部分内容都可以使用 Date API 获取。您可能不需要计算整个日期。根据我的推断，您需要日期字符串，后跟没有时区信息的时间字符串。

function timeRefresh() {
setInterval(() =>   {
const now = new Date();
document.getElementById('time').innerText = now.toDateString() + ' '+ now.toTimeString().split(' ')[0]
}, 1000)
};
timeRefresh();

<p id=time></p>