SoFunction
Updated on 2025-03-01

Using native JS and jQuery to achieve linear digital changes animation

Preface

Everyone should have some experience. In some special pages of data display, sometimes I hope that the numbers can change dynamically from one number to another number to attract users' attention and highlight data. So the following is here.

Here, I used two ways: one is native JavaScript and the other is jQuery plugin.

The principle of linear change of numbers is very simple, which is to change the number incrementally and loop the animation.

Native JS version

First get the DOM element. In order to be compatible with IE6, the compatibility method is as follows:

var domUtil = {
 // Get the DOM element get: function(query) {
  var _this = this;
  if() {
   return (query);
  } else {
   var elements = document;
   var queryStrArray = (/ +/);
   for(var i = 0; i < ; i++) {
    var domName = queryStrArray[i];
    elements = _this.getElementsOfParentNode(domName, elements);
   }
   if( == 1) {
    return elements[0];
   } else {
    return elements;
   }
  }
 },
 // Get the DOM element getElementsOfParentNode: function(domName, parentNode) {
  var _this = this;
  parentNode = parentNode || document;
  domName = ();
  var regExps = {
   id: /^#/,
   class: /^/
  };
  if((domName)) {
   domName = (/^\#/g, "");
   return (domName);
  } else if((domName)) {
   domName = (/^./g, "");
   return _this.getElementsByClassName(domName, parentNode);
  } else {
   return (domName);
  }
 },
 // Compatibility method for obtaining class elements getElementsByClassName: function(className, parentNode) {
  if(){
   return (className);
  } else {
   className = (/^ +| +$/g,"");
   var classArray = (/ +/);
   var eles = ("*");
   for(var i = 0;i < ; i++){
    var classEles = [];
    var reg = new RegExp("(^| )" + classArray[i] + "( |$)");
    for(var j = 0;j < ; j++){
     var ele = eles[j];
     if(()){
      (ele);
     }
    }
    eles = classEles;
   }
   return eles;
  }
 }
};
/*
  * Digital animation (currently only supports linear changes in digital animation)
  * options parameters:
  * element {String} DOM element query string
  * from {Number} Starting number
  * to {Number} End point number
  * duration {Number} animation time
  * callback {Function} Callback function when the number changes
  */
var animatingNumber = function(options) {
  = ();
  = ;
  = ;
  =  || 2000;
  = ;

  = null;
};

 = {
 start: function() {
  var _this = this;
  _this.animate();
 },
 stop: function() {
  if() {
   clearTimeout();
    = null;
  }
 },
 animate: function() {
  var _this = this;
  var curNum = _this.startNum;
  var animateTime = 0;
  var range = _this.endNum - _this.startNum;
  var timerStep = ( (_this.duration / range) );
  timerStep = timerStep > 20 ? timerStep : 20;
  var numStep = (range / _this.duration) * timerStep;

  _this.stop();

  (function animate() {
   _this.timer = setTimeout(function() {
    curNum = ( curNum + numStep );
    if( (_this.endNum > _this.startNum && curNum >= _this.endNum) || (_this.endNum < _this.startNum && curNum <= _this.endNum) ) {
     curNum = _this.endNum;
    }
    _this. = curNum;
    animateTime++;
    if(typeof  == 'function') {
     (curNum);
    }
    animate();
    if(curNum >= _this.endNum) {
     _this.stop();
    }
   }, timerStep);
  })();
 }
};

 = function(options) {
 return new animatingNumber(options);
};

use:

<p>Number: <span class='dynamicNum'>500</span></p>

<script>
 ({
  element: '.dynamicNum',
  from: 1,
  to: 500,
  duration: 2000
 }).start();
</script>

jQuery plug-in version

The principle is the same as above, just use the jQuery method to obtain the DOM element and encapsulate the digital animation method into a jQuery plug-in.

as follows:

/*
  * Digital animation (currently only supports linear changes in digital animation)
  * options parameters:
  * from {Number} Starting number
  * to {Number} End point number
  * duration {Number} animation time
  * callback {Function} Callback function when the number changes
  */
(function( $ ) {
 $. = function(options) {
  var settings = {
   element: this,
   startNum: ,
   endNum: ,
   duration:  || 2000,
   callback: 
  };
  var timer = null;

  var methods = {
   start: function() {
    var _this = this;
    _this.animate();
   },
   stop: function() {
    if(timer) {
     clearTimeout(timer);
     timer = null;
    }
   },
   animate: function() {
    var _this = this;
    var curNum = ;
    var animateTime = 0;
    var range =  - ;
    var timerStep = ( ( / range) );
    timerStep = timerStep &gt; 20 ? timerStep : 20;
    var numStep = (range / ) * timerStep;

    _this.stop();

    (function animate() {
     timer = setTimeout(function() {
      curNum = ( curNum + numStep );
      if( ( &gt;  &amp;&amp; curNum &gt;= ) || ( &lt;  &amp;&amp; curNum &lt;= ) ) {
       curNum = ;
      }
      (curNum);
      animateTime++;
      if(typeof  == 'function') {
       (curNum);
      }
      animate();
      if(curNum &gt;= ) {
       _this.stop();
      }
     }, timerStep);
    })();
   }
  };
  return (function() {
   return ();
  });

 };
})( jQuery );

use:

<p>Number: <span class='dynamicNum'></span></p>

<script>
$('.dynamicNum').animatingNumber({
 from: 1,
 to: 1000,
 duration: 2000
});
</script>

at last

OK, the above is all about this article. We will consider adding the option to the easing function in the later stage. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate.