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

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

前置条件:

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

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

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

  1. 使用HTML实现一个简单的结构。
  2. 使用CSS提供一个基本的显示风格。
  3. 主要的编程实现,行为使用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插件?

自定义计数预览

主要使用功能:

  • 文档.getElementById( Target Id ).innerHTML _ _
  • setTimeout( function() { Function Here }, timedelay )_ _

OVERVIEW

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

计划的流程

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

人们也可以使用自己的函数以特定的方式来呈现这些值。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程