https://countzerorecords.com/App/js/jquery.countTo.js

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