<html> <head> <title>jQuery countTo Example</title> <style type="text/css"> body { font-family: Arial; padding: 25px; } .example { position: relative; padding: 25px; margin: 25px 0; line-height: 1em; background-color: #eee; } .example h2 { margin-right: 100px; } .example p { position: absolute; right: 25px; top: 25px; font-size: 20px; } .red { color: #c00; } </style> </head> <body> <h1>jQuery countTo Example</h1> <p> This is a simple example of the <a href="https://github.com/mhuggins/jquery-countTo">jQuery countTo plugin</a> created by <a href="http://www.matthuggins.com">Matt Huggins</a>. Refer to the full documentation for more usage information. </p> <div class="example"> <h2> How many licks to the center of a Tootsie Pop? <button class="restart" data-target="#lollipop">Restart</button> </h2> <p><b class="timer" id="lollipop" data-to="3" data-speed="1500"></b></p> </div> <div class="example"> <h2> What is Earth's radius? <button class="restart" data-target="#earth">Restart</button> </h2> <p><b class="timer" id="earth" data-to="3968" data-speed="10000"></b> miles</p> </div> <div class="example"> <h2> Start the countdown... <button class="restart" data-target="#countdown">Restart</button> </h2> <p>Lift-off in <b class="timer" id="countdown" data-from="3" data-to="1" data-speed="3000"></b></p> </div> <div class="example"> <h2> Earth's Gravity <button class="restart" data-target="#gravity">Restart</button> </h2> <p><b class="timer" id="gravity" data-from="0" data-to="9.8" data-speed="3000" data-decimals="2"></b> m/s<sup>2</sup></p> </div> <div class="example"> <h2> To infinity...and beyond! <button class="restart" data-target="#infinity">Restart</button> </h2> <p><b class="timer" id="infinity" data-from="0" data-to="1" data-speed="1000"></b></p> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.countTo.js"></script> <script type="text/javascript"> jQuery(function ($) { // custom formatting example $('#earth').data('countToOptions', { formatter: function (value, options) { return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ','); } }); // custom callback when counting completes $('#countdown').data('countToOptions', { onComplete: function (value) { $(this).text('BLAST OFF!').addClass('red'); } }); // another custom callback for counting to infinity $('#infinity').data('countToOptions', { onComplete: function (value) { count.call(this, { from: value, to: value + 1 }); } }); // start all 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)); }); function count(options) { var $this = $(this); options = $.extend({}, options || {}, $this.data('countToOptions') || {}); $this.countTo(options); } }); </script> </body> </html>