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

View Demo on GitHub

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 number of parts and the maximum number for each of them – default: 23:59:59
• interval: number Sets the increment/decrement in milliseconds – default 1000
• stop: string Sets 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.

5 Comments