CODEWITHSUNDEEP
javascripthtml
Juan Vargas
Juan Vargas

Reputation: 9

How to add refresh interval in js clock

trying this code but i cant manage to make the seconds update in realtime, im not a developer so im struggling with this any help in whats wrong so the clock can refresh in realtime?

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>

Upvotes: 0

Views: 272

Answers (3)

Zer0
Zer0

Reputation: 458

Most of what you are displaying can be obtained using the Date API. You may not need to compute the whole date. From what I can infer you need the Date String followed by the time string without the time zone information.

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

<p id=time></p>

Upvotes: 0

Julien Maret
Julien Maret

Reputation: 589

Your are looking for setInterval not setTimeout. The code is a bit messy but here a quick fix :

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>

Upvotes: 0

Reyno
Reyno

Reputation: 6505

You're using setTimeout instead of setInterval. setTimeout will wait x amount of time before executing while setInterval will execute every x seconds.

You're also writing the time once to the dom. I moved it into the setInterval so it will update the dom after getting the new time.

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>

Upvotes: 2

Related Questions