countup.js让数字动起来

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>countup.js让数字动起来</title>
  <script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>
</head>

<body>
  <div id="box">
    <p id="money1">50000</p>
    <p id="money2">100000</p>
    <p id="money3">20000</p>
  </div>
  <script>
    var options = {
     
     
      useEasing: true,
      useGrouping: true,
      separator: ',',
      decimal: '.',
      prefix: '前者',
      suffix: '后者'
    };
    var money1 = new CountUp('money1', 0, 50000, 2, 1, options),
      money2 = new CountUp('money2', 0, 100000, 0, 1, options),
      money3 = new CountUp('money3', 0, 20000);
    money1.start();
    money2.start();
    money3.start();
    /**
     * param1: target(dom对象或者一个能获取到dom的字符串，也叫目标对象) *必须
     * param2: startVal（动画起始的值如24.02）*必选
     * param3: endVal (动画结束的值如94.62) *必选
     * param4: decimals(指定小数位数，默认为0，既没有小数) *可选
     * param5:  duration(整个动画运动的总时间，默认为2s) *可选
     * param6: options(用来修改默认的配置项) *可选
     **/
    // 默认的配置项
    // options = {
     
     
    //   useEasing: true, // 是否使用缓动动画，默认为缓动，可以设置为false让其匀速
    //   useGrouping: true, // 对数字进行分组，如12345，按三位一组变为类似123,45这样的
    //   separator: ',', // 分组时使用的分隔符默认是逗号，
    //   decimal: '.', // 小数点
    //   easingFn: easeOutExpo, // 缓动动画的函数
    //   formattingFn: formatNumber, // 格式化数字如12345，格式化为123，45
    //   prefix: '', // 添加前缀如12345，变为￥12345
    //   suffix: '', // 添加后缀如12345 通过添加后缀变为12345$，12345元之类的
    //   numerals: [] // 用来做替换操作，一般用不到，默认为空就是不用他
    // };
  </script>
</body>

</html>
countup.js让数字动起来

猜你喜欢
