Javascript Count Up Timer With Hours, Minutes, and Seconds

<span id="realtime">12:12:12</span>

$(document).ready (function () {
    startCount();
});
 
function startCount()
{
	timer = setInterval(count,1000);
}
function count()
{
	var time_shown = $("#realtime").text();
        var time_chunks = time_shown.split(":");
        var hour, mins, secs;
 
        hour=Number(time_chunks[0]);
        mins=Number(time_chunks[1]);
        secs=Number(time_chunks[2]);
        secs++;
            if (secs==60){
                secs = 0;
                mins=mins + 1;
               } 
              if (mins==60){
                mins=0;
                hour=hour + 1;
              }
              if (hour==13){
                hour=1;
              }
 
        $("#realtime").text(hour +":" + plz(mins) + ":" + plz(secs));
 
}
 
function plz(digit){
 
    var zpad = digit + '';
    if (digit < 10) {
        zpad = "0" + zpad;
    }
    return zpad;
}

8 thoughts on “Javascript Count Up Timer With Hours, Minutes, and Seconds”

1. This countup works great, thanks…. I do have one question.

   I want to display the counter with a span around each set of numbers in the counter.

   I tried this and it didn’t work

   $(“#realtime”).html(“” + hour +”:” + plz(mins) + “:” + plz(secs) + “”);

   Any help would be appreciated.

   Reply

2. Oh it seems to have stripped my span tags out of my comment!!! BUT between those “” I had opening and closing spans.

   Reply

3. thanks! exactly what i was looking for 🙂

   Reply

4. Oh my,, resets as page refreshes

   Reply

   1. yeah

      Reply

5. It didn’t work.

   Reply

6. why would you take values from the DOM? just declare the variables globally

   Reply

7. 12:12:NaN
   12:12:NaN
   12:12:NaN

   when i change it to class and create a 3 span this is what happen, do you have example for multiple countup timers?? thanks!

   Reply