refresh the time in javascript

Question

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!

http://stackoverflow.com/questions/2604450/how-to-create-a-jquery-clock-timer — Pardeep Dhingra, Jun 22 '15 at 12:35
window.setTimeout(function(){ document.location.reload(true); }, 15000); — cfprabhu, Jun 22 '15 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, Jun 22 '15 at 12:38
I guess I would only call it when the page first opened. cfprabhu, that works. Thank you so much! — CatCodinator, Jun 22 '15 at 12:43
This does cause my page to flicker when it updates, though. Is there a way to fix that? It's alright if only the time flickers, but everything that I've created with javascript flickers. I've tried moving it to the end of the document, but that didn't work. — CatCodinator, Jun 22 '15 at 12:52

score 5 · Answer 1 · answered Jun 22 '15 at 12:42

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);

answered Jun 22 '15 at 12:42

Sukima

9,965
3
46
60

I would, but I need to use their values in other parts of the page. I don't know javascript too well, but I think this will cause a problem. – CatCodinator Jun 22 '15 at 12:45
So then scope them outside the function but assign (update) inside. http://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/ – Sukima Jun 22 '15 at 13:15

score 0 · Answer 2 · answered Jun 22 '15 at 12:56

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.

score 0 · Answer 3 · answered Jun 22 '15 at 12:57

0

<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

answered Jun 22 '15 at 12:57

Kamalesh

21
3

Is there a way to do this so that I can keep my current format instead of reverting to the standard Date() format? – CatCodinator Jun 22 '15 at 13:00
In addition to that, I also need it to be automatic instead of onclick – CatCodinator Jun 22 '15 at 13:06
init() function will start execute, when the page loads. The date and time stamp can be customised. – Kamalesh Jun 22 '15 at 13:08
Thank you for your answer and reply! – CatCodinator Jun 22 '15 at 13:35

score 0 · Answer 4 · answered Jun 22 '15 at 13:24

<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.

score 0 · Accepted Answer · answered Jun 22 '15 at 13:24

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>

I definitely love the way this works and I tried it, but for some reason, it causes an error on my page that doesn't let any javascript render. I'm gonna take a few minutes to try to debug because this looks like it does exactly what I want. I changed all of my other time dependent variables to things like time.hours — CatCodinator, Jun 22 '15 at 13:34
The element I've used here has the ID `clock` not `timecode`, so that could be it. — Oka, Jun 22 '15 at 13:36
I had actually missed a something.time in my code. I did change that. But yeah, we're all good. — CatCodinator, Jun 22 '15 at 13:39

refresh the time in javascript

5 Answers5