javascriptjquerydatetime

how to update time regularly?


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?


Solution

  • 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:

    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
    <div id="time"></div>