CODEWITHSUNDEEP
javascript
Nicholas Hrboka
Nicholas Hrboka

Reputation: 177

Updating time without refreshing the page with Javascript

I'm building an app that displays the current time without have to refresh. I'm calling the time below, but when I display it I have to refresh the page to update the time. How do I continuously update the time?

function GetTime(){
var today = new Date();
var hour = today.getHours();
var minute = today.getMinutes();

        if (hour>=12){                  //Adding endings
                suffix = "P.M.";}
        else{
                suffix = "A.M.";}


minute = addZero(minute);       //Call addZero function
hour = removeMilitary(hour);    //Call removeMilitary Function

var fullTime = hour + ":" + minute + " " + suffix;  //Combine hour minute and the suffix



        function addZero(number){
                        if (number<10){
                            number = "0" + number;
                        }
                        return number;
        }

        function removeMilitary(hour){ //This function can be removed if desired by user.

            if (hour > 0 && hour <= 12) {
                hour = "" + hour;
            } else if (hour > 12) {
                hour = "" + (hour - 12);
            } else if (hour == 0) {
                hour= "12";
            }
            return hour;
        }
return fullTime;

}

Upvotes: 0

Views: 4553

Answers (4)

jeffkmeng
jeffkmeng

Reputation: 879

Javascript has a setInterval method.

You can get the time every second, by running your program every 1000 milliseconds:

setInterval(GetTime, 1000);
//if you incorporate updating the html 
//within the getTime function

or

setInterval(function(){
    document.getElementById("ID_of_the_time_element").innerHTML= getTime();
    //do something else
}, 1000}

Why setInterval at 1000 ms isn't very accurate

The problem with that is unless you start the set interval exactly on the second, your program will not change the second exactly on the second. I would recommend you get it more accurate by adjusting the interval to every 100 ms, for example. Then it would update every 100ms, which means that the most your clock will be behind is a tenth of a second.

A better solution

Setting an interval every 100ms is ok, but if you want more accuracy, setting it to 10ms isn't necessarily the best option, because repeating a task every 10ms is a pretty large burden on the computer. You could also use find the number of ms until the next second, and then use the setTimeout method to wait until the next second arrives and start the set timeout then. You would still have some computational delay(the amount of time between when it gets the number of milliseconds until the next second and it starts the setTimeout), but that's probably a lot less than 100 ms.

Upvotes: 3

omkaartg
omkaartg

Reputation: 2777

I assume you will use the setInterval() function. just add this to your button onclick;

setInterval(function(){Document.getElementById("div").innerHTML = getTime},1000);

Upvotes: 1

E. Celis
E. Celis

Reputation: 727

UPDATE I forgot the setInterval but someone else already pointed at it, so mix both answers and you're done!

Look at getElementById and innerHTML.

Something like the following snippet at the end of your function (instead of return fulltime ) should work:

...
var myElement = documentGetElementById('mydiv');
myElement.innerHTML = fulltime;
...

Of course you need to define some HTML element with <div id="mydiv"></div> or whatever you choose.

Upvotes: 0

Paul
Paul

Reputation: 36319

setInterval (GetTime, 1000) will call your function every second (1000 milliseconds) to get the time. You don't show how you're putting the time on the page, so you'll need to incorporate that as well.

Upvotes: 0

Related Questions