数字累加插件 CounterUp

 2016年05月03日    370     声明


1. 插件介绍

CounterUp(Counter-Up)是一个jQuery插件,它可以实现数字从0到指定值的动态累加。其支持的数据类型有:

  • 整数-如12345
  • 浮点数-如0.12345
  • 格式化数字-如1,234,567.00

CounterUp插件有以下特点:

  • 自动识别整数浮点数格式化数字
  • -如0.12345
  • 轻量化:~1kb
  • 最小化设置

插件依赖waypoints.js


2. 使用方法

CounterUp插件源码托管在github,可以通过以下网址下载插件:

https://github.com/bfintal/Counter-Up/

引用插件

下载后,引用插件及插件依赖库:

<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>

HTML

下面是插件支持的三种数字形式:

<span class="counter">1,234,567.00</span>
<span>$</span><span class="counter">1.99</span>
<span class="counter">12345</span>

jQuery调用

可以简单的通过.counterUp()方法调用并初始化:

$('.counter').counterUp();

调用时,也可以添加两个设置参数:

$('.counter').counterUp({
  delay: 10,
  time: 1000
});

两个设置参数说明如下:

  • delay-每次累加时的延时毫秒数(默认为10
  • time-动态累加总时长(默认为400