example.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <html>
  2. <head>
  3. <title>jQuery countTo Example</title>
  4. <style type="text/css">
  5. body {
  6. font-family: Arial;
  7. padding: 25px;
  8. }
  9. .example {
  10. position: relative;
  11. padding: 25px;
  12. margin: 25px 0;
  13. line-height: 1em;
  14. background-color: #eee;
  15. }
  16. .example h2 {
  17. margin-right: 100px;
  18. }
  19. .example p {
  20. position: absolute;
  21. right: 25px;
  22. top: 25px;
  23. font-size: 20px;
  24. }
  25. .red {
  26. color: #c00;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <h1>jQuery countTo Example</h1>
  32. <p>
  33. This is a simple example of the
  34. <a href="https://github.com/mhuggins/jquery-countTo">jQuery countTo plugin</a>
  35. created by <a href="http://www.matthuggins.com">Matt Huggins</a>. Refer to
  36. the full documentation for more usage information.
  37. </p>
  38. <div class="example">
  39. <h2>
  40. How many licks to the center of a Tootsie Pop?
  41. <button class="restart" data-target="#lollipop">Restart</button>
  42. </h2>
  43. <p><b class="timer" id="lollipop" data-to="3" data-speed="1500"></b></p>
  44. </div>
  45. <div class="example">
  46. <h2>
  47. What is Earth's radius?
  48. <button class="restart" data-target="#earth">Restart</button>
  49. </h2>
  50. <p><b class="timer" id="earth" data-to="3968" data-speed="10000"></b> miles</p>
  51. </div>
  52. <div class="example">
  53. <h2>
  54. Start the countdown...
  55. <button class="restart" data-target="#countdown">Restart</button>
  56. </h2>
  57. <p>Lift-off in <b class="timer" id="countdown" data-from="3" data-to="1" data-speed="3000"></b></p>
  58. </div>
  59. <div class="example">
  60. <h2>
  61. Earth's Gravity
  62. <button class="restart" data-target="#gravity">Restart</button>
  63. </h2>
  64. <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>
  65. </div>
  66. <div class="example">
  67. <h2>
  68. To infinity...and beyond!
  69. <button class="restart" data-target="#infinity">Restart</button>
  70. </h2>
  71. <p><b class="timer" id="infinity" data-from="0" data-to="1000" data-speed="800"></b></p>
  72. </div>
  73. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  74. <script type="text/javascript" src="jquery.countTo.js"></script>
  75. <script type="text/javascript">
  76. jQuery(function ($) {
  77. // custom formatting example
  78. $('#earth').data('countToOptions', {
  79. formatter: function (value, options) {
  80. return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
  81. }
  82. });
  83. // custom callback when counting completes
  84. $('#countdown').data('countToOptions', {
  85. onComplete: function (value) {
  86. $(this).text('BLAST OFF!').addClass('red');
  87. }
  88. });
  89. // another custom callback for counting to infinity
  90. $('#infinity').data('countToOptions', {
  91. onComplete: function (value) {
  92. count.call(this, {
  93. from: value,
  94. to: value + 1000
  95. });
  96. }
  97. });
  98. // start all the timers
  99. $('.timer').each(count);
  100. // restart a timer when a button is clicked
  101. $('.restart').click(function (event) {
  102. event.preventDefault();
  103. var target = $(this).data('target');
  104. $(target).countTo('restart');
  105. });
  106. function count(options) {
  107. var $this = $(this);
  108. options = $.extend({}, options || {}, $this.data('countToOptions') || {});
  109. $this.countTo(options);
  110. }
  111. });
  112. </script>
  113. </body>
  114. </html>