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