前端依赖11-“countup.js“: “^2.6.0“第一讲-优快云博客

本文链接：https://blog.youkuaiyun.com/programmer54/article/details/131586436

一：简介

countup.js 是一个 JavaScript 库，用于在网页中创建动态的计数器效果。它可以让你在网页上展示数字逐渐增加的效果，通常用于统计、计时器或其他需要显示数字变化的场景。

二：官网

三：常规JS使用

我在AI上了下，完整代码如下，结果不能用：

<!DOCTYPE html>
<html>
<head>
    <title>CountUp.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/countup.js"></script>
</head>
<body>
<h1>CountUp.js Example</h1>
<p>Count: <span id="myCounter"></span></p>

<script>
  var options = {
    startVal: 0,
    endVal: 100,
    duration: 3,
    separator: ','
  };
  var counter = new CountUp('myCounter', options);
  counter.start();
</script>
</body>
</html>

上述代码报错：
在这里插入图片描述

这个是什么原因呢？于是我从源代码入手，从源代码来看它的版本是 2.7.0 而
在这里插入图片描述

于是我研究了一下源码，并查看了一下文档，大概修改两个地方

参数中 endVal 现在已经不用了，正确方式为了 new countUp.CountUp('myCounter', 50000, options);
应该引用 dist/countUp.umd.js 而不是 dist/counter.js 文件，至于这是为什么，我目前也不太清楚

在这里插入图片描述

于是整理下来的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>CountUp.js Example</title>
    <script src="./demo/countUp.js/dist/countUp.umd.js"></script>
</head>
<body>
<h1>CountUp.js Example</h1>
<p>Count: <span id="myCounter"></span></p>

<script>
  var options = {
    startVal: 0,
    duration: 3,
    separator: ','
  };
  var counter = new countUp.CountUp('myCounter', 50000, options);
  counter.start();
</script>
</body>
</html>