jquery.count-to.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. /*!
  2. jQuery countTo Plugin
  3. Version: v1.2.0
  4. Plugin URL: https://github.com/mhuggins/jquery-countTo
  5. License: Copyright (c) Matt Huggins | Released under the MIT license
  6. !*/
  7. (function (factory) {
  8. if (typeof define === 'function' && define.amd) {
  9. // AMD
  10. define(['jquery'], factory);
  11. } else if (typeof exports === 'object') {
  12. // CommonJS
  13. factory(require('jquery'));
  14. } else {
  15. // Browser globals
  16. factory(jQuery);
  17. }
  18. }(function ($) {
  19. var CountTo = function (element, options) {
  20. this.$element = $(element);
  21. this.options = $.extend({}, CountTo.DEFAULTS, this.dataOptions(), options);
  22. this.init();
  23. };
  24. CountTo.DEFAULTS = {
  25. from: 0, // the number the element should start at
  26. to: 0, // the number the element should end at
  27. speed: 1000, // how long it should take to count between the target numbers
  28. refreshInterval: 100, // how often the element should be updated
  29. decimals: 0, // the number of decimal places to show
  30. formatter: formatter, // handler for formatting the value before rendering
  31. onUpdate: null, // callback method for every time the element is updated
  32. onComplete: null // callback method for when the element finishes updating
  33. };
  34. CountTo.prototype.init = function () {
  35. this.value = this.options.from;
  36. this.loops = Math.ceil(this.options.speed / this.options.refreshInterval);
  37. this.loopCount = 0;
  38. this.increment = (this.options.to - this.options.from) / this.loops;
  39. };
  40. CountTo.prototype.dataOptions = function () {
  41. var options = {
  42. from: this.$element.data('from'),
  43. to: this.$element.data('to'),
  44. speed: this.$element.data('speed'),
  45. refreshInterval: this.$element.data('refresh-interval'),
  46. decimals: this.$element.data('decimals')
  47. };
  48. var keys = Object.keys(options);
  49. for (var i in keys) {
  50. var key = keys[i];
  51. if (typeof(options[key]) === 'undefined') {
  52. delete options[key];
  53. }
  54. }
  55. return options;
  56. };
  57. CountTo.prototype.update = function () {
  58. this.value += this.increment;
  59. this.loopCount++;
  60. this.render();
  61. if (typeof(this.options.onUpdate) == 'function') {
  62. this.options.onUpdate.call(this.$element, this.value);
  63. }
  64. if (this.loopCount >= this.loops) {
  65. clearInterval(this.interval);
  66. this.value = this.options.to;
  67. if (typeof(this.options.onComplete) == 'function') {
  68. this.options.onComplete.call(this.$element, this.value);
  69. }
  70. }
  71. };
  72. CountTo.prototype.render = function () {
  73. var formattedValue = this.options.formatter.call(this.$element, this.value, this.options);
  74. this.$element.text(formattedValue);
  75. };
  76. CountTo.prototype.restart = function () {
  77. this.stop();
  78. this.init();
  79. this.start();
  80. };
  81. CountTo.prototype.start = function () {
  82. this.stop();
  83. this.render();
  84. this.interval = setInterval(this.update.bind(this), this.options.refreshInterval);
  85. };
  86. CountTo.prototype.stop = function () {
  87. if (this.interval) {
  88. clearInterval(this.interval);
  89. }
  90. };
  91. CountTo.prototype.toggle = function () {
  92. if (this.interval) {
  93. this.stop();
  94. } else {
  95. this.start();
  96. }
  97. };
  98. function formatter(value, options) {
  99. return value.toFixed(options.decimals);
  100. }
  101. $.fn.countTo = function (option) {
  102. return this.each(function () {
  103. var $this = $(this);
  104. var data = $this.data('countTo');
  105. var init = !data || typeof(option) === 'object';
  106. var options = typeof(option) === 'object' ? option : {};
  107. var method = typeof(option) === 'string' ? option : 'start';
  108. if (init) {
  109. if (data) data.stop();
  110. $this.data('countTo', data = new CountTo(this, options));
  111. }
  112. data[method].call(data);
  113. });
  114. };
  115. }));