JAVASCRIPT   70

countTo.js

Guest on 12th August 2021 06:52:08 PM

  1. /* CountTo */
  2. ;(function ($) {
  3.         $.fn.countTo = function (options) {
  4.                 options = options || {};
  5.  
  6.                 return $(this).each(function () {
  7.                         // set options for current element
  8.                         var settings = $.extend({}, $.fn.countTo.defaults, {
  9.                                 from:            $(this).data('from'),
  10.                                 to:              $(this).data('to'),
  11.                                 speed:           $(this).data('speed'),
  12.                                 refreshInterval: $(this).data('refresh-interval'),
  13.                                 decimals:        $(this).data('decimals')
  14.                         }, options);
  15.  
  16.                         // how many times to update the value, and how much to increment the value on each update
  17.                         var loops = Math.ceil(settings.speed / settings.refreshInterval),
  18.                                 increment = (settings.to - settings.from) / loops;
  19.  
  20.                         // references & variables that will change with each update
  21.                         var self = this,
  22.                                 $self = $(this),
  23.                                 loopCount = 0,
  24.                                 value = settings.from,
  25.                                 data = $self.data('countTo') || {};
  26.  
  27.                         $self.data('countTo', data);
  28.  
  29.                         // if an existing interval can be found, clear it first
  30.                         if (data.interval) {
  31.                                 clearInterval(data.interval);
  32.                         }
  33.                         data.interval = setInterval(updateTimer, settings.refreshInterval);
  34.  
  35.                         // initialize the element with the starting value
  36.                         render(value);
  37.  
  38.                         function updateTimer() {
  39.                                 value += increment;
  40.                                 loopCount++;
  41.  
  42.                                 render(value);
  43.  
  44.                                 if (typeof(settings.onUpdate) == 'function') {
  45.                                         settings.onUpdate.call(self, value);
  46.                                 }
  47.  
  48.                                 if (loopCount >= loops) {
  49.                                         // remove the interval
  50.                                         $self.removeData('countTo');
  51.                                         clearInterval(data.interval);
  52.                                         value = settings.to;
  53.  
  54.                                         if (typeof(settings.onComplete) == 'function') {
  55.                                                 settings.onComplete.call(self, value);
  56.                                         }
  57.                                 }
  58.                         }
  59.  
  60.                         function render(value) {
  61.                                 var formattedValue = settings.formatter.call(self, value, settings);
  62.                                 $self.text(formattedValue);
  63.                         }
  64.                 });
  65.         };
  66.  
  67.         $.fn.countTo.defaults = {
  68.                 from: 0,               // the number the element should start at
  69.                 to: 0,                 // the number the element should end at
  70.                 speed: 1000,           // how long it should take to count between the target numbers
  71.                 refreshInterval: 100,  // how often the element should be updated
  72.                 decimals: 0,           // the number of decimal places to show
  73.                 formatter: formatter,  // handler for formatting the value before rendering
  74.                 onUpdate: null,        // callback method for every time the element is updated
  75.                 onComplete: null       // callback method for when the element finishes updating
  76.         };
  77.  
  78.         function formatter(value, settings) {
  79.                 return value.toFixed(settings.decimals);
  80.         }
  81. }(jQuery));

Raw Paste


Login or Register to edit or fork this paste. It's free.