How to keep updating datetime every minute in Javascript?

Question

I am using following code to display date on my webpage. I need to update it every minute. How to do that?

var d=new Date();
var n=d.toString();
document.write(n);

Currently its static, means when the page load, datetime of that moment is displayed. I have to update time every minutes without refreshing the page.

Answer 1

Try with setInterval() : http://jsfiddle.net/4vQ8C/

        var nIntervId; //<----make a global var in you want to stop the timer
                       //-----with clearInterval(nIntervId);
        function updateTime() {
            nIntervId = setInterval(flashTime, 1000*60); //<---prints the time 
        }                                                //----after every minute

        function flashTime() {
            var now = new Date();
            var h = now.getHours();
            var m = now.getMinutes();
            var s = now.getSeconds();
            var time = h + ' : ' + m + ' : ' + s;
            $('#my_box1').html(time); //<----updates the time in the $('#my_box1') [needs jQuery]                
        }                             

        $(function() {
            updateTime();
        });

You can use document.getElementById("my_box1").innerHTML=time; instead of $('#my_box1')

from MDN:

About setInterval : --->Calls a function or executes a code snippet repeatedly, with a fixed time delay between each call to that function.

About setTimeout : ----> Calls a function or executes a code snippet after specified delay.

Answer 2

Here is how you can print date time every second

function displayDate() {

    var n=BuildDateString();
          document.write(n);
    window.setTimeout("displayDate();", 1000); // to print it every minute take 1000*60 
}

function BuildDateString()
{
    var today = new Date()
    var year = today.getYear()
    if (year < 2000)
        year = "19" + year
    var _day = today.getDate()
    if (_day < 10)
        _day = "0" + _day
    var _month = today.getMonth() + 1
    if (_month < 10)
        _month = "0" + _month
    var hours = today.getHours()
    var minutes = today.getMinutes()
    var seconds = today.getSeconds()
    var dn = "AM" 
    if (hours > 12)
    {
        dn = "PM"
        hours = hours - 12
    }
    if (hours == 0)
        hours = 12
    if (minutes < 10)
        minutes = "0" + minutes
    if (seconds < 10)
        seconds = "0" + seconds
    var DateString = _month+"/"+_day+"/"+year+" "+hours+":"+minutes+":"+seconds+" "+dn

    return DateString;
}

Answer 3

I am using following approach:

var myVar=setInterval(function(){myDateTimer()},60000);

            function makeArray() 
            {
                for (i = 0; i<makeArray.arguments.length; i++)
                this[i + 1] = makeArray.arguments[i];
            }

            function myDateTimer()
            {
                var months = new makeArray('January','February','March','April','May',
                'June','July','August','September','October','November','December');
                var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
                var date = new Date();
                var day = date.getDate();
                var month = date.getMonth() + 1;
                var yy = date.getYear();
                var year = (yy < 1000) ? yy + 1900 : yy;
                var hours = date.getHours();
                var minutes = date.getMinutes();
                var finaldate = days[ date.getDay() ] + ", " + months[month] + " " + day + ", " + year + " " + hours +" : " + minutes;
                document.getElementById("showDateTime").innerHTML=finaldate;
            }

Answer 4

just do this

$(function(){
setInterval(function(){
    var d=new Date();
    var n=d.toString();
    $('#test').html(n);
},1000);
});

demo http://runjs.cn/code/txlexzuc