https://www.wuerth.com/system/modules/jquery/jquery.countTo.js

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