example.html

<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="1000" data-speed="800"></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 + 1000
          });
        }
      });

      // 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');
        $(target).countTo('restart');
      });

      function count(options) {
        var $this = $(this);
        options = $.extend({}, options || {}, $this.data('countToOptions') || {});
        $this.countTo(options);
      }
    });
  </script>
</body>
</html>