提问者:小点点

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


尝试这段代码,但我不能设法使秒的更新在实时,我不是一个开发人员,所以我与此斗争任何帮助在什么错误,所以时钟可以刷新在实时?

null

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>

null


共3个答案

匿名用户

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

您还将时间写入DOM一次。 我将它移到setInterval中,这样它将在获得新时间后更新dom。

null

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>

匿名用户

您正在查找setInterval,而不是SetTimeout。 代码有点混乱,但这里有一个快速的解决方法:

null

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>

匿名用户

您所显示的大部分内容都可以使用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>