CountUp 数字跳动插件

2,316 阅读1分钟
import { CountUp } from './countUp.min.js';  // 引入插件 

// 配置
let options = {
  startVal: 20, // 开始的数字  一般设置0开始
  decimalPlaces: 2, // number类型 小数位,整数自动添.00
  duration: 5, // number类型 动画延迟秒数,默认值是2
  useGrouping: true, // boolean类型  是否开启逗号,默认true(1,000)false(1000)
  useEasing: true,  // booleanl类型 动画缓动效果(ease),默认true
  smartEasingThreshold: 500, // numberl类型 大于这个数值的值开启平滑缓动
  smartEasingAmount: 300, // numberl类型
  separator: ',',// string 类型 分割用的符号
  decimal: '.', // string 类型  小数分割符合
  prefix: '¥', // sttring 类型  数字开头添加固定字符
  suffix: '元', // sttring类型 数字末尾添加固定字符
  numerals: [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ']  // Array类型 替换从0到9对应的字,也就是自定数字字符了,数组存储
}

// target = 目标元素的 ID;
// endVal  结束值;
// decimals 小数位数,默认值是0;

// myElementId:绑定的dom元素
// 2000:最终滚动出来的值
var countUp = new CountUp('myElementId', 2000, options);
if (!countUp.error) {
  // 事件
  countUp.start(); // 启动
  countUp.pauseResume(); // 暂停或者恢复  如果在运行状态触发该方法则暂定,暂定状态再触发则恢复。
  countUp.reset(); // 重置
  countUp.update(989); // 更新最终值
} else {
  console.error(countUp.error);
}

编辑切换为居中

添加图片注释,不超过 140 字(可选)

如果觉得上面的配置太复杂 可以直接去下方官方链接中直接配置好 拿到代码复制即可

官网链接: inorganik.github.io/countUp.js