A jQuery Counter Plugin
Overview
A jQuery counter based on http://code.google.com/p/jquery-countdown with extra options like the ability to count up.
- Format: fully customized using an element attribute or an init option
- Direction: Up or Down
- Stop: fully customized using an element attribute or an init option
- Appearance: fully customized using CSS3
- License: MIT
Options
Options can be set by attribute data-<name>="value" or in the options hash on counter initialization: $(element).counter({name: value, ...})
direction: up|downCounter direction – default:downformat: stringDefines the number of parts and the maximum number for each of them – default:23:59:59interval: numberSets the increment/decrement in milliseconds – default1000stop: stringSets the counter stop number – default: maximum number allowed by the format.
Events
counterStop: Raised when the counter reaches the stop number
$('.counter').on('counterStop', function() {
//code
});
Usage
10 seconds countdown:
<span class="counter">0:10</span>
<script type="text/javascript">// <![CDATA[
$('.counter').counter();
// ]]></script>
120 seconds count:
<span class="counter" data-direction="up" data-format="120">0</span>
<script type="text/javascript">// <![CDATA[
$('.counter').counter();
// ]]></script>
Binary counter stopping at 001000000 (note the spaces between the binary digits):
<span class="counter" data-direction="up" data-format="1 1 1 1 1 1 1 1" data-stop="">0 0 1 0 0 0 0 0</span>
<script type="text/javascript">// <![CDATA[
$('.counter').counter();
// ]]></script>
Download
You can download jquery-counter from Github.
How can i show date also in the count down? Please help. i am missing that function only in this excellent script
There were issues with IE7-8:
1. Split regexp didn’t work properly for these browsers. Had to use http://blog.stevenlevithan.com/archives/cross-browser-split fix.
2. $.each with strings didn’t work for IE7. Had to use cycle for and string.charAt instead.
if(typeof digits[0] == ‘undefined’){
for(var u = 0; u < digits.length; u++){
var digit = digits.charAt(u);
epart.append($('’).addClass(‘digit digit’ + digit).text(digit));
}
}
else {
$.each(digits, function(i, digit) {
epart.append($(”).addClass(‘digit digit’ + digit).text(digit));
});
}
Hi Maxim, sorry for my late reply.
We forgot to notify you, the problem with IE7 was fixed one month ago: https://github.com/sophilabs/jquery-counter/commits/master
how can i get the counter that counts up to not count so fast? I would like it to go up slowly throughout the day. I want it to add something like 250 every hour until midnight and then reset. thanks!
hi,
i try to use your counter for select a random number and show it with the numbers like a jackpot. Can i do it with it?