I have been trying to figure out how to refresh the time (and only the time) automatically in my webpage, but I can't seem to get it.

This is what I have.

var d = new Date();
var weekday = d.getDay();
var day = d.getDate();
var month = d.getMonth() + 1; //JS says jan = 0
var year = d.getFullYear();
var minutes = d.getMinutes();
var hours = d.getHours() + 1; //eastern time zone
var seconds = d.getSeconds();
var ms = d.getMilliseconds();

function distime(minutes, hours, month, day, year) {
    if (minutes < 10) {
        var lowMin = "0" + minutes.toString();
        document.getElementById("timecode").innerHTML = hours.toString() + ':' + lowMin + ' ' + month.toString() + '/' + day.toString() + '/' + year.toString();
        alert("here");
    } else
        document.getElementById("timecode").innerHTML = hours.toString() + ':' + minutes + ' ' + month.toString() + '/' + day.toString() + '/' + year.toString();
    alert("here");
};

//      var clockTime = distime(minutes, hours, month, day, year);

function init(minutes, hours, month, day, year) {
    alert("init");
    distime(minutes, hours, month, day, year);
    setTimeout(distime, 10000);
};

var initTime = init(minutes, hours, month, day, year);

The time is attached to a div, in HTML and I am not using PHP.

I have heard that I need to use ajax to do this, but I'm not sure how to implement that.

Again, my question is: How do I refresh the time every 10 seconds so that it will display correctly on my site.

Thanks!

The updated code that solved my problem can be seen below.

var time = {};

(function () {
  var clock = document.getElementById('timecode');

  (function tick () {
    var minutes, d = new Date();
    time.weekday = d.getDay();
    time.day = d.getDate();
    time.month = d.getMonth() + 1; //JS says jan = 0
    time.year = d.getFullYear();
    time.minutes = d.getMinutes();
    time.hours = d.getHours() + 1; //eastern time zone
    time.seconds = d.getSeconds();
    time.ms = d.getMilliseconds();

    minutes = (time.minutes < 10 ? '0' + time.minutes : time.minutes);

    clock.innerHTML = time.hours + ':' + minutes + ' ' + time.month + '/' + time.day + '/' + time.year;

    window.setTimeout(tick, 1000);
  }()); // Note the parens here, we invoke these functions right away
}()); // This one keeps clock away from the global scope

Thanks to everyone who helped!

I have been trying to figure out how to refresh the time (and only the time) automatically in my webpage, but I can't seem to get it.

This is what I have.

var d = new Date();
var weekday = d.getDay();
var day = d.getDate();
var month = d.getMonth() + 1; //JS says jan = 0
var year = d.getFullYear();
var minutes = d.getMinutes();
var hours = d.getHours() + 1; //eastern time zone
var seconds = d.getSeconds();
var ms = d.getMilliseconds();

function distime(minutes, hours, month, day, year) {
    if (minutes < 10) {
        var lowMin = "0" + minutes.toString();
        document.getElementById("timecode").innerHTML = hours.toString() + ':' + lowMin + ' ' + month.toString() + '/' + day.toString() + '/' + year.toString();
        alert("here");
    } else
        document.getElementById("timecode").innerHTML = hours.toString() + ':' + minutes + ' ' + month.toString() + '/' + day.toString() + '/' + year.toString();
    alert("here");
};

//      var clockTime = distime(minutes, hours, month, day, year);

function init(minutes, hours, month, day, year) {
    alert("init");
    distime(minutes, hours, month, day, year);
    setTimeout(distime, 10000);
};

var initTime = init(minutes, hours, month, day, year);

The time is attached to a div, in HTML and I am not using PHP.

I have heard that I need to use ajax to do this, but I'm not sure how to implement that.

Again, my question is: How do I refresh the time every 10 seconds so that it will display correctly on my site.

Thanks!

The updated code that solved my problem can be seen below.

var time = {};

(function () {
  var clock = document.getElementById('timecode');

  (function tick () {
    var minutes, d = new Date();
    time.weekday = d.getDay();
    time.day = d.getDate();
    time.month = d.getMonth() + 1; //JS says jan = 0
    time.year = d.getFullYear();
    time.minutes = d.getMinutes();
    time.hours = d.getHours() + 1; //eastern time zone
    time.seconds = d.getSeconds();
    time.ms = d.getMilliseconds();

    minutes = (time.minutes < 10 ? '0' + time.minutes : time.minutes);

    clock.innerHTML = time.hours + ':' + minutes + ' ' + time.month + '/' + time.day + '/' + time.year;

    window.setTimeout(tick, 1000);
  }()); // Note the parens here, we invoke these functions right away
}()); // This one keeps clock away from the global scope

Thanks to everyone who helped!

• javascript
• jquery
• html
• ajax

• Are you using jQuery? – Tushar Commented Jun 22, 2015 at 12:34
• stackoverflow./questions/2604450/… – Pardeep Dhingra Commented Jun 22, 2015 at 12:35
• window.setTimeout(function(){ document.location.reload(true); }, 15000); – cfprabhu Commented Jun 22, 2015 at 12:36
• The setTimeout(...} would go inside of my init function? @cfprabhu. Yes, I am using jquery. I didn't include the $(document).ready(function(){ but it is in my code – CatCodinator Commented Jun 22, 2015 at 12:38
• When will you call the int() ? – cfprabhu Commented Jun 22, 2015 at 12:41

5 Answers 5

Move them to a function:

function updateTime() {
  var d = new Date();
  var weekday = d.getDay();
  var day = d.getDate();
  var month = d.getMonth() + 1; //JS says jan = 0
  var year = d.getFullYear();
  var minutes = d.getMinutes();
  var hours = d.getHours() + 1; //eastern time zone
  var seconds = d.getSeconds();
  var ms = d.getMilliseconds();

  distime(minutes, hours, month, day, year);
}

setInterval(updateTime, 10000);

If you require the values for other parts of your program, store them in some kind of global state, and update those values within the clock function.

In this example we store all the parts in an object called time, which minimizes how many global variables we create. We can then access those properties later: time.ms, etc. For accuracy, your clock should tick more often then not - one call a second is not going to hit performance very hard, and will keep your minutes more accurate at the top of a minute.

Another thing to note is, in JavaScript when you add a number to a string, the number will be coerced into a string, so calling .toString() beforehand isn't really needed.

var time = {};

(function () {
  var clock = document.getElementById('clock');
  
  (function tick () {
    var minutes, d = new Date();
    time.weekday = d.getDay();
    time.day = d.getDate();
    time.month = d.getMonth() + 1; //JS says jan = 0
    time.year = d.getFullYear();
    time.minutes = d.getMinutes();
    time.hours = d.getHours() + 1; //eastern time zone
    time.seconds = d.getSeconds();
    time.ms = d.getMilliseconds();
    
    minutes = (time.minutes < 10 ? '0' + time.minutes : time.minutes);
    
    clock.innerHTML = time.hours + ':' + minutes + ' ' + time.month + '/' + time.day + '/' + time.year;
    
    window.setTimeout(tick, 1000);
  }()); // Note the parens here, we invoke these functions right away
}()); // This one keeps clock away from the global scope

console.log(time.ms); // We have access to all those properties via a single variable.

<div id="clock"></div>

function updateTime() {
//Your function that prints time and replace the old time
// call this function again in 10000ms
setTimeout(updateTime, 10000); }

Use the below line to call this function on your page.

updateTime(); //initial call

Hope it helps.

<div id="dvNow"></div>
 <input type="button" value="Time" onclick="init()" />

 <script type="text/javascript">
        function init() {
            setTimeout(distime, 1000);
            setTimeout(init, 1000);
        };

        function distime() {
            var now = new Date();
            var sDateTime = now.toLocaleString();

            $("#dvNow").html(sDateTime);
        }
 </script>

The function updates only the Div#dvNow element, no need to refresh you whole page

<script type="text/javascript">
        init();

        function init() {
            setTimeout(distime, 1000);
            setTimeout(init, 1000);
        };

        function distime() {
            var now = new Date();
            //var sDateTime = now.toLocaleString();
            var sDateTime = now.toDateString() + " " + now.toLocaleTimeString()
            $("#dvNow").html(sDateTime);
        }
    </script>

init() function will start execute, when the page loads. The date and time stamp can be customised.