Javascript Count Up Timer With Hours, Minutes, and Seconds

Here is a script that takes a given time and increments each second to make it appear to update in realtime.

Time given, must be in hh:mm:ss format and the div id must be realtime



Script that makes everything happen, needs jquery, but could be easily re-written in pure javascript.

$(document).ready (function () {

function startCount()
	timer = setInterval(count,1000);
function count()
	var time_shown = $("#realtime").text();
        var time_chunks = time_shown.split(":");
        var hour, mins, secs;
            if (secs==60){
                secs = 0;
                mins=mins + 1;
              if (mins==60){
                hour=hour + 1;
              if (hour==13){
        $("#realtime").text(hour +":" + plz(mins) + ":" + plz(secs));


function plz(digit){
    var zpad = digit + '';
    if (digit < 10) {
        zpad = "0" + zpad;
    return zpad;

11 responses to “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.

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *