¿Cómo hacer su propio complemento countUp.js usando JavaScript?

requisito previo:

1. Modelo de objeto de documento (DOM) 
2. Uso de Clases en ES6

Si eres un principiante en JavaScript y tienes conocimientos básicos de programación, no te preocupes, has llegado al lugar perfecto.

Dividamos el problema en varios segmentos:

1. Implementando una estructura simple usando HTML .
2. Proporcionar un estilo de visualización básico mediante CSS .
3. La programación principal a implementar, el comportamiento usando   JavaScript
   • onclick=”….( )”  : Para activar la función
   • Creando una clase con el nombre Contador
   • Usando un constructor para inicializar la clase
   • Creando el método/función con el nombre disparar( )   para animación
   • Llamar al método shoot desde la clase Counter

Paso 1: Implementando el 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 </button>
    </div>
</div>
<!-- Inside body -->
<script>
    // Including JavaScript Code
</script>

Paso 2: Implementando el CSS

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

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

Producción:

Vista previa de cuenta ascendente personalizada

Principales funciones utilizadas:

• document.getElementById ( ID de destino ).innerHTML 
• setTimeout( función() {   Función aquí } , retardo de tiempo ) 

VISIÓN GENERAL

El flujo del programa

Este es el prototipo básico del countUp.js personalizado que podemos implementar usando el concepto de Clase en JavaScript.

 También se puede usar su propia función para representar los valores de formas específicas.