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
12:12:12
12:12:12
Script that makes everything happen, needs jquery, but could be easily re-written in pure javascript.
$(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;
}
10 responses to “Javascript Count Up Timer With Hours, Minutes, and Seconds”
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.
Oh it seems to have stripped my span tags out of my comment!!! BUT between those “” I had opening and closing spans.
thanks! exactly what i was looking for 🙂
Oh my,, resets as page refreshes
yeah
It didn’t work.
why would you take values from the DOM? just declare the variables globally
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!
svolich
fuck off