Simple jQuery Plugin For Counting Time Up and Down - countTo

Simple jQuery Plugin For Counting Time Up and Down - countTo
File Size: 4.7KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: Free for personal use
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

countTo is a small (~3kb unminified) jQuery timer plugin that dynamically counts up or down to a target number specified in the data-to and data-from attributes. Event callbacks and custom output format supported.

See also:

Basic Usage:

1. Create a container for the timer/counter. Using data-to and data-from attributes to specify the range of target numbers. By default, the plugin will count up to a specified number from zero.

<p class="timer" id="controllable" data-from="2000" data-to="2014" data-speed="2000"></b></p>

2. Optionally, you can create a button to restart the timer/counter with jQuery countTo's restart method. Using data-target attribute to point to the target timer/counter. 

<p class="timer" id="controllable" data-from="2000" data-to="2014" data-speed="2000"></b></p>

3. Load the latest version of jQuery javascript library and jQuery countTo plugin in the document.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.countTo.js"></script> 

4. Initialize the plugin.

<script type="text/javascript">
jQuery(function ($) {

// start the timers
$('.timer').each(count);

// restart a timer when a button is clicked
$('.restart').click(function (event) {
event.preventDefault();
var target = $(this).data('target');
count.call($(target));
});
});
</script>

5. You can also set and customize the timer/counter in the javascript instead of using data-* attributes.

from: 0,               // the number the element should start at
to: 0,                 // the number the element should end at
speed: 1000,           // how long it should take to count between the target numbers
refreshInterval: 100,  // how often the element should be updated
decimals: 0,           // the number of decimal places to show
formatter: formatter,  // handler for formatting the value before rendering
onUpdate: null,        // callback method for every time the element is updated
onComplete: null       // callback method for when the element finishes updating

For more Advanced Usages, please check the demo page or visit the official website.