项目链接: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