Animate–JS快速改变页面数字变化过程动画

通过定时器，快速修改页面上数字，页面初始化时常用功能。

// 判断是否是数字
function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

/**
*判断一个数有几位小数
*@param {number} number
*/
function getDecimalPoint(number) {
  if(!isNumeric(number)) {return;}
  var num = parseFloat(number);
  var str = num.toString();
  var x = str.indexOf('.'); 
  if (x > -1) {
    return str.length - x - 1;
  } else {
   return 0;
  }
}

/**
 * 快速改变页面数字，数字增加过程
 * @param {string} selector 可以被jquery选中的选择器（标签内不应有除了数字以外其他内容）
 * @param {Object} param1 
 * {
 *    duration: 数字变化过程的时间 默认：2000sm,
 *    timeStep: 变化间隔时间 默认: 50ms,
 *    start: 数字变化起始值,
 *    end: 数字变化最终值
 * }
 */
function ChangeDomNum(selector, _ref) {
  var start = _ref.start,
      end = _ref.end,
      duration = _ref.duration,
      timeStep = _ref.timeStep;

  if (
    (duration && !isNumeric(duration)) ||
    (timeStep && !isNumeric(timeStep)) ||
    !isNumeric(start) ||
    !isNumeric(end) ||
    start === end
  ) {
    return false;
  } else {
    duration = parseFloat(duration);
    timeStep = parseFloat(timeStep);
    start = parseFloat(start);
    end = parseFloat(end);
  }

  var timeStepRel = timeStep || 50;
  var startRel = start || 0;
  var duringRel = duration || 2000;
  var result = startRel;
  var decimalPonit = Math.max(getDecimalPoint(end), getDecimalPoint(start)); // 几位小数

  var timeCount = Math.ceil(duringRel / timeStepRel);
  var step = parseFloat(((end - startRel) / timeCount).toFixed(decimalPonit));
  var timer = null;
  timer = setInterval(function () {
    result += step;

    if (step > 0 && result >= end) {
      result = end;
      clearInterval(timer);
      timer = null;
    } else if (step < 0 && result <= start) {
      result = start;
      clearInterval(timer);
      timer = null;
    }

    $(selector).text(result.toFixed(decimalPonit));
  }, timeStepRel);
}

调用：

// 调用：
changeDomNum(
  '#downloadsNum', 
  {start: 0, end: 123.5, duration: 2000, timeStep: 50}
);

效果：

---

欢迎关注我的公众号，公众号将第一时间更新angular教程：