Как добавить интервал refre sh в js часы

Question

пытается этот код, но мне не удается обновить секунды в реальном времени, я не разработчик, поэтому я борюсь с этим, что-то не так, чтобы часы могли обновлять sh в реальном времени?

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, чтобы он обновил дом после получения нового времени.

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

Большую часть того, что вы показываете, можно получить с помощью 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>

Answer 3

Вы ищете 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>