jquery在指定时间之后更新数字动画插件

Roughly.js是jquery在指定时间之后更新数字动画插件。该jquery数字动画插件可以在指定的日期之后，每隔指定的秒数增加指定的数字，数字增加时以动画的方式来展示。

使用方法

在页面中引入jquery以及jquery.roughly.js文件。

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

HTML结构

可以直接通过为元素添加data-*属性的方式来使用该jquery数字动画插件。

<div class="roughly"
  data-start-date="January 1, 2015"
  data-start-count="100"
  data-wait-seconds="2"
  data-increase-by="5"></div>
                

初始化插件

如果没有指定data-*属性，可以通过roughly()方法来说初始化该插件。

<div id="example"></div>
<script>
    $("#example").roughly({waitSeconds: 5})
</script>               
                

你还可以通过下面的方法来设置全局参数。

<script>
  $.fn.roughly.defaults = {
    startDate: 'January 1, 2015',
    prefix: '$'
  };
</script>                  
                

配置参数

该jquery数字动画插件的可用配置参数有：

startDate: 'January 1, 1970', // start date for counter
startCount: 0, // starting number for counter
waitSeconds: 1, // number of seconds to wait between updates
increaseBy: 1, // number to increase by with each update
decimals: 0, // number of decimals to display
prefix: '', // add a prefix to the number
postfix: '' // add a postfix to the number                  
                

• startDate：开始日期。
• startCount：计数的初始值。
• waitSeconds：等待多少秒后更新数字。
• increaseBy：每次增加多少数值。
• decimals：显示浮点数。
• prefix：为数字添加一个前缀。
• postfix：为数字添加一个后缀。

该jquery数字动画插件的github地址为：https://github.com/dahjson/roughly