前言

大家應該都有所體會，在一些數據展示的專題頁里，有時候希望數字能動態從某一個數變化到另一個數，以此來吸引用戶眼球，突出數據。于是有了下文。

在這里，我用了兩種方式：一種是原生的JavaScript，另一種是jQuery插件。

數字線性變化的原理很簡單，就是讓數字增量變化，并循環動畫。

原生JS版

首先獲取DOM元素。為了兼容到IE6，兼容性方法如下：

var domUtil = { // 獲取DOM元素 get: function(query) {  var _this = this;  if(document.querySelector) {   return document.querySelector(query);  } else {   var elements = document;   var queryStrArray = query.split(/ +/);   for(var i = 0; i < queryStrArray.length; i++) {    var domName = queryStrArray[i];    elements = _this.getElementsOfParentNode(domName, elements);   }   if(elements.length == 1) {    return elements[0];   } else {    return elements;   }  } }, // 獲取DOM元素 getElementsOfParentNode: function(domName, parentNode) {  var _this = this;  parentNode = parentNode || document;  domName = domName.trim();  var regExps = {   id: /^#/,   class: /^/  };  if(regExps.id.test(domName)) {   domName = domName.replace(/^/#/g, "");   return parentNode.getElementById(domName);  } else if(regExps.class.test(domName)) {   domName = domName.replace(/^./g, "");   return _this.getElementsByClassName(domName, parentNode);  } else {   return parentNode.getElementsByTagName(domName);  } }, // 獲取class元素的兼容方法 getElementsByClassName: function(className, parentNode) {  if(parentNode.getElementsByClassName){   return parentNode.getElementsByClassName(className);  } else {   className = className.replace(/^ +| +$/g,"");   var classArray = className.split(/ +/);   var eles = parentNode.getElementsByTagName("*");   for(var i = 0;i < classArray.length; i++){    var classEles = [];    var reg = new RegExp("(^| )" + classArray[i] + "( |$)");    for(var j = 0;j < eles.length; j++){     var ele = eles[j];     if(reg.test(ele.className)){      classEles.push(ele);     }    }    eles = classEles;   }   return eles;  } }};

/* * 數字動畫（目前僅支持數字動畫的線性變化） * options參數： *  element {String} DOM元素query字符串 *  from {Number} 起始數字 *  to {Number} 終點數字 *  duration {Number} 動畫時間 *  callback {Function} 數字變化時的回調函數 */var animatingNumber = function(options) { this.element = domUtil.get(options.element); this.startNum = options.from; this.endNum = options.to; this.duration = options.duration || 2000; this.callback = options.callback; this.timer = null;};animatingNumber.prototype = { start: function() {  var _this = this;  _this.animate(); }, stop: function() {  if(this.timer) {   clearTimeout(this.timer);   this.timer = null;  } }, animate: function() {  var _this = this;  var curNum = _this.startNum;  var animateTime = 0;  var range = _this.endNum - _this.startNum;  var timerStep = Math.abs( Math.floor(_this.duration / range) );  timerStep = timerStep > 20 ? timerStep : 20;  var numStep = (range / _this.duration) * timerStep;  _this.stop();  (function animate() {   _this.timer = setTimeout(function() {    curNum = Math.ceil( curNum + numStep );    if( (_this.endNum > _this.startNum && curNum >= _this.endNum) || (_this.endNum < _this.startNum && curNum <= _this.endNum) ) {     curNum = _this.endNum;    }    _this.element.innerText = curNum;    animateTime++;    if(typeof this.callback == 'function') {     this.callback(curNum);    }    animate();    if(curNum >= _this.endNum) {     _this.stop();    }   }, timerStep);  })(); }};animatingNumber.create = function(options) { return new animatingNumber(options);};