JavaScript 数字滚动countup.js

1. 概述

1.1 说明

在项目过程中，有时候需要动态的去展示一些数据的加载状态，如一个数字为10000，需要5秒时间滚动加载完成。此时使用countup.js就能够很方便的处理此类功能问题。

1.2 countup.js

countup.js是一个无依赖性、轻量级的javascript类，可用于快速创建动画，以更有趣的方式显示数字/数据。详见countup.js

1.3 countup.js使用

 npm install countup  进行安装依赖

import CountUp from "countup"  在页面中引入

new CountUp(target, startVal, endVal, decimals, duration, options)

参数：

• • target: 目标元素的id  *必填
  • startVal：开始的值(从哪个值开始)  *必填
  • endVal：结束的值(滚动到哪个值结束)  *必填
  • decimals：小数位数，默认值为0  *可选
  • duration：动画持续时间，单位为秒，默认值为2  *可选
  • options：选项的可选对象  *可选
    • • useEasing:true  --是否使用缓动动画，默认为缓动，可设置为false让其匀速
      • useGrouping:true --对数字进行分组，如12345，按三位一组变为类似12,345这样的
      • separator: ','  --分组时使用的分隔符默认是逗号
      • decimal: '.'  --小数点
      • prefix: ''  --添加前缀如12345，变为￥12345
      • suffix: ''  --添加后缀如12345 通过添加后缀变为12345$，12345元之类的

 方法：

• • 暂停/恢复      pauseResume
  • 重置动画       reset
  • 更新值           update(newVal)

 2. 代码

2.1 源代码

var CountUp = function(target, startVal, endVal, decimals, duration, options) {
    var self = this;
    self.version = function() {
        return "1.9.2"
    };
    self.options = {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        easingFn: easeOutExpo,
        formattingFn: formatNumber,
        prefix: "",
        suffix: "",
        numerals: []
    };
    if (options && typeof options === "object") {
        for (var key in self.options) {
            if (options.hasOwnProperty(key) && options[key] !== null) {
                self.options[key] = options[key]
            }
        }
    }
    if (self.options.separator === "") {
        self.options.useGrouping = false
    } else {
        self.options.separator = "" + self.options.separator
    }
    var lastTime = 0;
    var vendors = ["webkit", "moz", "ms", "o"];
    for (