123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- <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>
|