Simple jQuery Plugin For Counting Time Up and Down - countTo

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:

• jQuery Plugin For Countdown & Count Up Timer - runner
• Animating Numbers Counting Up with jQuery Counter-Up Plugin

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.

// the number the element should start at
from: 0,        

// the number the element should end at       
to: 0,                 

// how long it should take to count between the target numbers
speed: 1000,           

// how often the element should be updated
refreshInterval: 100,  

// the number of decimal places to show
decimals: 0,         

// handler for formatting the value before rendering  
formatter: formatter,  

// callback method for every time the element is updated
onUpdate: null,        

// callback method for when the element finishes updating
onComplete: null       

Change log:

2015-09-17

• CommonJS support

2015-05-28

• Allow counter to be reinitialized with new options

---

This awesome jQuery plugin is developed by mhuggins. For more Advanced Usages, please check the demo page or visit the official website.