如何使用CountUp.js数字滚动插件_知识百科

如何使用CountUp.js数字滚动插件

分类：知识百科日期：2025-03-15 点击：0

CountUp.js是一款可以实现数字滚动的插件，它可以让数字从一个值滚动到另一个值，可以指定滚动的时间，支持小数点，支持负数，支持回调函数，支持自定义格式，支持滚动动画，支持多种语言，支持自定义字符，支持更多的参数设置。

使用CountUp.js数字滚动插件需要先引入countUp.min.js文件，实例化一个CountUp对象，并传入参数：

let countUp = new CountUp("target", 0, 100, 0, 2);

其中，target是要显示滚动数字的目标元素的id，0和100是数字滚动的起始和结束值，0是小数点位数，2是滚动的时间（单位为秒）。

就可以调用start()方法来开始滚动：

countUp.start();

调用start()方法之后，数字就会从0滚动到100，滚动的时间为2秒，如果想要停止滚动，可以调用stop()方法：

countUp.stop();

如果想要重新开始滚动，可以调用reset()方法：

countUp.reset();

如果想要更改滚动的起始和结束值，可以调用update()方法：

countUp.update(200, 300);

其中，200是新的起始值，300是新的结束值，滚动的时间和小数点位数不变。

CountUp.js还支持自定义格式，如果想要以千分位格式显示滚动数字，可以使用如下代码：

let countUp = new CountUp("target", 0, 100, 0, 2, {
    separator: ','
});

如果想要添加回调函数，可以使用如下代码：

let countUp = new CountUp("target", 0, 100, 0, 2, {
    callback: function() {
        console.log('done');
    }
});

上面的代码中，当滚动完成后，会在控制台输出“done”。

CountUp.js数字滚动插件是一款功能强大的插件，可以让数字滚动变得更加简单、高效。

如何使用CountUp.js数字滚动插件