javascript 数字动画、递增特效

• 效果
  

  See the Pen javascript 数字动画、递增特效 by henry (@ZhouHengYi) on CodePen.

---

• HTML

<h2 class="images">0</h2>
<input type="text" value="0" id="txt_end"/>
-
<input type="text" value="0" id="txt_start" />
<input type="button" value="+500" onclick="setNum(500);"/>

• JavaScript

var countToNumber = function (element, number, suffix, duration) {
  $({count: parseInt(element.text().split("+")[0].replace(/\,/g, ''))}).animate({count: number}, {
    duration: duration ? duration : 1000,
    easing: 'swing',
    step: function (now) {
      element.text((Math.floor(now) + suffix).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
    },
    complete: function () {
      countingFromZero = false;
    }
  });
}

//调用
countToNumber($('.images'), 500, '', 200);

function setNum(){
  countToNumber($('.images'), $("#txt_start").val(), '', $("#txt_end").val());
}

• 依赖 jquery