countUp.js

项目链接：http://inorganik.github.io/countUp.js

countUp.js网上教程已经有很多了，但很多只是提供了一个接口方法，现在做个详细的说明，便于新手快速如梦。

导入countUp.js

HTML语句：

<span id="dayCar" style="font-size: 28px;color: yellow;" >0</span>

js代码：

window.onload = function () { ???????????startDayCar(); ???????}; ???????function startDayCar(){ ???????????????????????var options = { ???????????????useEasing: true, ????????????????useGrouping: true, ????????????????separator: ‘,‘, ????????????????decimal: ‘.‘, ????????????}; ???????????var demo = new CountUp(‘dayCar‘, 0, 25, 0, 2.5, options); ???????????if (!demo.error) { ???????????????demo.start(); ???????????} else { ???????????????console.error(demo.error); ???????????} ???????}

CountUp对象5个差数对应

target = id of html element or var of previously selected html element where counting occurs
startVal = the value you want to begin at
endVal = the value you want to arrive at
decimals = number of decimal places, default 0
duration = duration of animation in seconds, default 2
options = optional object of options (see below)

Options 

useEasing: true, // toggle easing
useGrouping: true, // 1,000,000 vs 1000000
separator: ‘,‘, // character to use as a separator
decimal: ‘.‘, // character to use as a decimal
easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner‘s easeOutExpo
formattingFn: formatNumber, // optional custom formatting function, default is formatNumber above
prefix: ‘‘, // optional text before the result
suffix: ‘‘, // optional text after the result
numerals: [] // optionally pass an array of custom numerals for 0-9