jQuery.counter (javascript + css3)

Overview

• 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

0:10

0

0:00.0

0

A jQuery counter based on http://code.google.com/p/jquery-countdown with more options.

Options

Options can be set by attribute data-<name>="value" or in the options hash on counter initialization: $(element).counter({name: value, ...})

direction: up|down
Counter direction - default: down

format: string
Defines the format and the limit for each part - default: 23:59:59

interval: number
Defines the time between each counter increment - default 1000 milliseconds

stop: string
Sets the counter stop number - default: maximum number allowed by the format.

<span class="counter counter-analog"
 data-direction="up" data-format="23:50" data-interval="1000"
 data-stop="5:00">0</span>
<script>
    $('.counter').counter();
</script>

<span></span>
<script>
    $('span')
      .addClass('counter counter-analog')
      .counter({
        initial: "10:00"
        direction: 'down',
        format: "23:59",
        interval: 1000,
        stop: "5:00"
      });
</script>

Methods

play
Play counter

reset
Reset counter

stop
Stop counter

$('.counter').counter('stop');

Events

counterStop
Raised when the counter reach limit

$('.counter').on('counterStop', function() {
    //code
});

Example

10 seconds countdown:

<span class="counter counter-analog">0:10</span>
<script>
    $('.counter').counter();
</script>

120 seconds count:

<span class="counter counter-analog" data-direction="up" data-format="120">0</span>
<script>
    $('.counter').counter();
</script>

License

MIT License