countUp.js

Posted 2020-10-17 wolfrider

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