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

先决条件：

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

如果您是 JavaScript 的初学者并且具有基本的编程知识，那么请不要担心，您已经到达了一个完美的地方。

让我们将问题分成多个部分：

1. 使用HTML实现一个简单的结构。
2. 使用CSS提供基本的显示样式。
3. 主要实现编程，行为使用JavaScript
   • onclick=”….( )” :触发函数
   • 创建一个名为Counter的类
   • 使用构造函数初始化类
   • 为动画创建名为shot( )的方法/函数
   • 从调用类的计数器的方法拍摄

第 1 步：实现 HTML

HTML

    
    
         _______ 
  
        
         START 
    



    // Including JavaScript Code

第 2 步：实现 CSS

CSS

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

第 3 步：JavaScript

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();
}

输出：

自定义计数预览

主要使用的功能：

• document.getElementById(目标 ID ).innerHTML  
• setTimeout( 函数() { 函数 Here } , timedelay )  

概述

程序的流程

这是我们可以使用 JavaScript 中 Class 的概念实现的自定义 countUp.js 的基本原型。

还可以使用自己的函数以特定方式呈现值。