Make clock auto refresh

Question

How do I make my clock auto refresh, because it only shows the time the page was loaded?

(function time () {
    document.write(new Date().toString("hh:mm:ss tt"));
})();

Just a minor tip...do not use `document.write`...is the devil itself!! — Hackerman, Jan 09 '18 at 16:41

jak.b · Answer 1 · 2018-01-09T17:25:07.287

2

You could use window.setTimeout or window.setInterval. You have to update the time every seconds (1000 ms).

setTimeout

(function time () {
 document.getElementById("time").innerHTML = new Date().toString("hh:mm:ss tt");
        var timeout = setTimeout(time, 1000); // recalls the function after 1000 ms
})();

<div id="time"></div>

setInterval

function time () {
 document.getElementById("time").innerHTML = new Date().toString("hh:mm:ss tt");
}
var timeInterval = setInterval(time, 1000); // recalls the function every 1000 ms

<div id="time"></div>

edited Jan 09 '18 at 17:25

answered Jan 09 '18 at 17:05

jak.b

273
4
15

1

Will use setinteval. Thanks. – Auron Hines Jan 09 '18 at 18:38

score 1 · Answer 2 · answered Jan 09 '18 at 16:49

1

You should use setInterval. This will call your function every 1000ms

function time() {
  console.log(new Date().toString("hh:mm:ss tt"));
};

setInterval(time, 1000);

answered Jan 09 '18 at 16:49

Paul Fitzgerald

11,770
4
42
54

score 0 · Accepted Answer · edited Jan 31 '18 at 13:59

This approach requires, say, <div id="txt"></div> in your html template:

var timer = document.getElementById('timer');

function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var ampm = h >= 12 ? 'PM' : 'AM';
h = h % 12;
h = h ? h : 12; // the hour '0' should be '12'
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s + " " + ampm;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
return i;
}

<body onload="startTime()">

See also How to format a javascript Date.
And here is the demo.

Make clock auto refresh

3 Answers3

setTimeout

setInterval