前端之旅

首先，

先下載JQuery：

http://jquery.com/download/

載入JQery：

<script src="js/jquery.min.js"></script>

依自己放置檔案位置去修改路徑。

HTML：

<p>客戶數<span id="pageLoad">0</span></p>

JS：

(function($) {
    $.fn.animateNumbers = function(stop, commas, duration, ease) {
        return this.each(function() {
            var $this = $(this);
            var start = parseInt($this.text().replace(/,/g, ""));
            commas = (commas === undefined) ? true : commas;
            $({value: start}).animate({value: stop}, {
                duration: duration == undefined ? 1000 : duration,
                easing: ease == undefined ? "swing" : ease,
                step: function() {
                    $this.text(Math.floor(this.value));
                    if (commas) { $this.text($this.text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")); }
                },
                complete: function() {
                   if (parseInt($this.text()) !== stop) {
                       $this.text(stop);
                       if (commas) { $this.text($this.text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")); }
                   }
                }
            });
        });
    };
})(jQuery);

 $(document).ready(function() {
            $("#pageLoad").animateNumbers(5000, true, 2000);
});

呈現結果：

會從0跳到5000：

方法二：

數字會越變越大。

HTML：

 <p>客戶數<span id="fun-level">0</span></p>

JS：

$('#fun-level').animateNumber(
  {
    number: 100,
    color: 'green', 
    'font-size': '45px',

    easing: 'easeInQuad',

    numberStep: function(now, tween) {
      var floored_number = Math.floor(now),
          target = $(tween.elem);

      target.text(floored_number);
    }
  },
  1800
);

呈現結果：