how to update time regularly?

Question

function timeClock()
{
    setTimeout("timeClock()", 1000);        
    now = new Date();
    alert(now);
    f_date = now.getDate()+" "+strMonth(now.getMonth())+" "+now.getFullYear()+" / "+timeFormat(now.getHours(), now.getMinutes());
    return f_date;
}

<span class="foo"><script type="text/javascript">document.write(timeClock());</script></span>

alert(now); gives me the value every second but it is not updated in the html. How can I update the time on the html without refresh the page?

score 44 · Accepted Answer · edited May 23 '17 at 10:30

44

There are a number of mistakes in your code. Without the use of var infront of your variable declarations, you leak them into the global scope.

Also, the use of document.write is discouraged.

Here's how I would do it:

JavaScript:

function updateClock() {
    var now = new Date(), // current date
        months = ['January', 'February', '...']; // you get the idea
        time = now.getHours() + ':' + now.getMinutes(), // again, you get the idea

        // a cleaner way than string concatenation
        date = [now.getDate(), 
                months[now.getMonth()],
                now.getFullYear()].join(' ');

    // set the content of the element with the ID time to the formatted string
    document.getElementById('time').innerHTML = [date, time].join(' / ');

    // call this function again in 1000ms
    setTimeout(updateClock, 1000);
}
updateClock(); // initial call

HTML:

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

edited May 23 '17 at 10:30

Community

1
1

answered Feb 23 '11 at 14:13

Ivo Wetzel

46,459
16
98
112

You should probably pad the `now.getMinutes()` call with leading zeros. – Paul Tomblin Jan 27 '18 at 23:05
1

Little improvements: now.getMonth()+1 should be sufficient instead of passing months array. and to get double digit minutes, seconds etc: ("0" + now.getMinutes()).slice(-2) – abhy Oct 26 '19 at 14:30
@abhy Thanks for your advice, it helps me a lot!! – Coco Yen Apr 16 '20 at 02:07
says too much recursion – france1 Sep 01 '22 at 16:17

score 6 · Answer 2 · answered Mar 11 '16 at 01:00

setInterval(expression, timeout);

The function setTimeout is intended for a single timeout, so using setInterval would be a more appropriate option. SetInterval will run regularly without the additional lines that Ivo's answer has.

I would rewrite Ivo's answer as follows:

JavaScript:

function updateClock() {
  // Ivo's content to create the date.
  document.getElementById('time').innerHTML = [date, time].join(' / ')
}
setInterval(updateClock, 1000);

Try it out yourself! https://jsfiddle.net/avotre/rtuna4x7/2/

score 0 · Answer 3 · answered Dec 17 '17 at 06:59

Straigt Javascript time format / update

1: create month converter func 2: create time func 3: create update func 4: create outPut func

    // month converter from index / 0-11 values
function covertMonth(num){
  let months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  // look into index with num 0-11
  let computedRes = months[num];
  return computedRes;
}

// time func
function Time(){
   // important to get new instant of the Date referrance
  let date = new Date();
  this.time = date.toLocaleTimeString();
  this.year = date.getUTCFullYear();
  this.day = date.getUTCDate();
  this.month = date.getUTCMonth();
  this.currentTime = date.toLocaleTimeString() + ' ' + covertMonth(this.month) + ' ' + this.day + ' ' + this.year;
  return this.currentTime;
}


 function timeOutPut(){
  let where = document.getElementById('some-id');
  where.textContent = Time(); // 1:21:39 AM Dec 17 2017
}

   // run every 5secs
setInterval(timeOutPut, 5000);

score 0 · Answer 4 · answered Feb 23 '11 at 14:04

0

x = document.getElementsByTagName('SPAN').item(0);
x.innerHTML = f_date;

try putting this code block instead of return statement, i haven't test it but it will probably work

answered Feb 23 '11 at 14:04

Yunus Eren Güzel

3,018
11
36
63

First time documrnt.write is showing the undefined value.[ 23 Feb 2011 / 7.47 PM ISTundefined]. After a second it shows me the correct value. – alex Feb 23 '11 at 14:16

score 0 · Answer 5 · answered Feb 23 '11 at 14:08

0

There may be something in timeago jQuery plugin you can hook into, but I haven't honestly tried...

http://timeago.yarp.com/

answered Feb 23 '11 at 14:08

Tim Reddy

4,340
1
40
77

score 0 · Answer 6 · answered Feb 23 '11 at 14:08

$('span.foo').html(f_date);

place this inside your timeclock() function

untested

    function timeClock()
    {
        setTimeout("timeClock()", 1000);        
        now = new Date();
        alert(now);
        f_date = now.getDate()+" "+strMonth(now.getMonth())+" "+now.getFullYear()+" / "+timeFormat(now.getHours(), now.getMinutes());
       $('span.foo').html(f_date);

}

score 0 · Answer 7 · answered Feb 23 '11 at 14:11

0

I'd use setInterval rather than setTimeout:

https://developer.mozilla.org/en/DOM/window.setInterval

answered Feb 23 '11 at 14:11

Abderrahmane TAHRI JOUTI

3,514
2
26
43

1

it is advised to avoid `setInterval()` have a look here http://weblogs.asp.net/bleroy/archive/2009/05/14/setinterval-is-moderately-evil.aspx – Rafay Feb 23 '11 at 14:15

score 0 · Answer 8 · answered Feb 23 '11 at 14:15

I think your setTmeout function has the wrong variables, the first one should be a function not a string, that confused me for a bit. Basically you need to write to the span tag when you run the function.

I created a jQuery version in a fiddle to demonstrate what I mean. Didn't have your strMonth function but you get the idea. I also changed the alert to console.log but you can remove that line.

http://jsfiddle.net/5JWEV/

score 0 · Answer 9 · answered Aug 02 '18 at 06:33

I used @soloproper setInterval concept @Ivo Wetzel overall answer, my update is all about formatting the time as required. Reduced Programming Lines

<div id="liveClock"> </div>

$(document).ready(function () {
        updateClock();
});

function updateClock() {
   document.getElementById('liveClock').innerHTML = new Date().format("dd/MMMM/yyyy hh:mm:ss tt");
}
setInterval(updateClock, 1000);

score -1 · Answer 10 · answered Feb 23 '11 at 14:08

function timeClock()
{
    setTimeout("timeClock()", 1000);        
    now = new Date();
    alert(now);
    f_date = now.getDate()+" "+strMonth(now.getMonth())+" "+now.getFullYear()+" / "+timeFormat(now.getHours(), now.getMinutes());

    document.getElementById("foo").innerHTML = f_date;

}

<span id="foo"></span>

how to update time regularly?

10 Answers10

Linked