Quick Tip: Make a jQuery Count Up Timer
Last year, I published a small tutorial about building a neat countdown timer. One of the requests I've been getting since, is for a way to change the code so it counts up - showing the time that has passed since the page was opened or some other point in time.
This is actually quite easy and will do a great topic for a quick tip. So here we go!
Step 1: Renaming The Old
First you need to grab a copy of the original plugin from the linked article above and extract it somewhere on your hard drive. Now you don't want to have a plugin named count down that counts up do you? We have to rename it. Change the names of the assets/countdown folder and the files inside it to countup respectfully. Also remember to change the paths in index.html that refer to these files.
Step 2: Writing The New
Only minor modifications have to be done on the plugin itself. Open assets/countup/jquery.contup.js and do the following edits:
// Creating the plugin
$.fn.countup = function(prop){
var options = $.extend({
callback : function(){},
start : new Date() // Changing this to "start"
},prop);
// Tename the "left" variable to "passed"
var passed = 0, d, h, m, s,
positions;
init(this, options);
positions = this.find('.position');
(function tick(){
// Calculate the passed time
passed = Math.floor((new Date() - options.start) / 1000);
// Calculate the passed minutes, hours and days
d = Math.floor(passed / days);
updateDuo(0, 1, d);
passed -= d*days;
h = Math.floor(passed / hours);
updateDuo(2, 3, h);
passed -= h*hours;
m = Math.floor(passed / minutes);
updateDuo(4, 5, m);
passed -= m*minutes;
// Number of seconds passed
s = passed;
updateDuo(6, 7, s);
// Calling an optional user supplied callback
options.callback(d, h, m, s);
// Scheduling another call of this function in 1s
setTimeout(tick, 1000);
})();
// This function updates two digit positions at once
function updateDuo(minor,major,value){
switchDigit(positions.eq(minor),Math.floor(value/10)%10);
switchDigit(positions.eq(major),value%10);
}
return this;
};
To call the plugin, simply do the following (this is also the code you must place in script.js instead of the current one):
$('#countdown').countup();
Alternatively, if you wish to count up from a moment in the past:
$('#countdown').countup({
start: new Date(2012, 10, 27, 15, 58, 21) //year, month, day, hour, min, sec
});
It's a wrap!
Bootstrap Studio
The revolutionary web design tool for creating responsive websites and apps.
Learn more
Hi!
I need the countdown only for minutes and seconds. How can I display only them (make days and hours invisible)?
Best,
Eugene
RTFM! :)
I´ve found it already :)
I've just in the set
.countDays{ display:none !important; }
.countDiv0{ display:none !important; }
.countHours{ display:none !important; }
.countDiv1{ display:none !important; }
in the jquery.countdown.css file.
Best,
Eugene
hi, thank you for this article;
i try this and it work properly in firefox and opera; but it dosent work in internet explorer!!!!
can you help me? how can i run this in IE?
If you are using IE9, open the developer tools and look for error messages. This will give you clues on what might be wrong.
Good Post,
How do i make a timer which counts a specified time instead of this ?
Hi,
Great plugin, but I have one issue: the days field only shows 2 digits - making the counter suitable for 3 months only (give or take). Any recommendation on how to add 2 digits to the days field, without screwing up too much of the code?
Thanks
Hi,
this is really a gud one..
I just want to continue the timer from the last position.
How can i do that ..??
ie, let the value of my counter now in 00:00:00:20 and when i click start then the timer should start from this value (from 20sec..)..
expecting your response..
Cheers.,
Hariharan
Hi,
I like the script very much, but there is an issue. When i am calculating days from 1st Jan 2007, it went wrong. Bcoz in my case counter will be 2159:00:00:00
but script displays 2 digits in days. Could you please help me resolving this.
Sanjay
hi, very cool plugin. I try to use your count up and count down plugin in my mobile apps but failed to load. can you teach us how to make it on mobiel? i think many people asking for this issues.
This is really good one, it would be great if it can count down. Like the time left to start website, so on
If I use in the script.js:
$('#countdown').countup({start: new Date(2012, 10, 23, 15, 58, 21) //year, month, day, hour, min, sec});
days ARE -4 -1 , NEGATIVE NUMBERS...
Try declaring the date object like this:
$('#countdown').countup({start: new Date("July 26, 2013 06:00:00");});
Worked for me.
Thank you, Paul!
I experienced exactly what ichtyo did - and it's 2015!
Your solution did the tricky.
hi
first of all, thanks alot, this plugin is really cool. it's exactly what I need.
how can i stop the counter when user clicking a button?
Great tutorial. I would like to replace the colons with Days, Hrs, Mins and Secs as appropriate. Is this possible? Any help would be appreciated. Thanks
Update..I'm actually able to add the Days, Hrs, Mins and Secs labels in the HTML. But when I include the HTML in my jsfiddle the script adds the counting digits in addition to an extra set which do nothing.
(http://jsfiddle.net/bmwertman/qZUGH/)
Is there a way to have the script start counting in milliseconds? I would like to add that column to the ones that are already there so that the milliseconds column would be switching numbers rapidly, giving a better sense of urgency when viewing the display.
Hi
Thank you for the code.
I need your help - How to make the counter stop and restart after 30 seconds (every 30 seconds it will start again..)
?
I like this but having the same issue as many others - I need to display days only but need them to be 4 digits (we are counting up from several years back). Although I'm fairly good at css - I'm very very very new to jQuery (am teaching myself through a couple of books). If there is an easy answer available, could someone share? If not, I'll continue teaching myself until I can figure this out. Thanks!
@Sherry - I have same requirement as you, need to display 4 digits. Just wondering if you have managed to get the code. Thanks!