如何使用JavaScript制作你自己的countUp.js插件

前置条件:

1.文档对象模型( DOM )
2.ES6中类的使用

如果你是一个JavaScript的初学者，并且有基本的编程知识，那么不要担心，你已经在一个完美的地方登陆了。

让我们把这个问题分成多个部分。

使用HTML实现一个简单的结构。
使用CSS提供一个基本的显示风格。
主要的编程实现，行为使用JavaScript。

onclick=”….( )” : 要触发函数
创建一个名为Counter的类。
使用构造函数来初始化类。
为动画创建名为shoot()的方法/函数
从类Counter中调用方法shoot。

第1步：实施HTML

<!---inside body---->
<div class="container">
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png" />
    <div class="main">
        <h1 id="counter"> _______ </h1>
  
        <!-- This is the target id -->
        <button onclick="trigger()"> START 
    </div>
</div>
<!-- Inside body -->
<script>
    // Including JavaScript Code
</script>

第2步：实施CSS

.container {
    display: flex;
    padding:20px;
}
      
.main{
    padding:20px;
}
      
button{
    width:100px;
    height:45px;
    background-color:#33ff33;
    border-radius:10px;
}

第3步：JavaScript

// Creating the Class: Object Prototype
class Counter {
  
    // Countructor: Initializing the Class
    constructor(data) {
        this.start = data["start"];
        this.end = data["end"];
        this.frames = data["frames"];
        this.step = data["step"];
        this.target = data["target"];
    }
  
    // Method for Animation
    shoot() {
  
        // Variables
        var count = 0;
        var stepArray = [];
  
        // Putting the starting Value
        document.getElementById(this.target)
            .innerHTML = this.start;
  
        // Storing the step value in Array
        while (this.end > this.start) {
            this.start += this.step;
            stepArray[count++] = this.start;
        }
  
        // Doing Countup Animation
        var functional_target = this.target;
        for (let i = 0; i < count; i++) {
            setTimeout(function () {
                document.getElementById(functional_target)
                    .innerHTML = stepArray[i];
            }, (i + 1) * this.frames);
        }
  
        // Placing the final value
        setTimeout(function () {
            document.getElementById(
                functional_target).innerHTML = this.end;
        }, count * frames);
  
    }
}
  
// Creating object from class
var animate = new Counter({
    start: 100000,
    end: 2000000,
    frames: 1,
    step: 1000,
    target: "counter"
});
  
// Triggering the Class Method
function trigger() {
  
    // Calling the shoot() method of the class
    animate.shoot();
}

输出:

如何使用JavaScript制作你自己的countUp.js插件？