2

Tengo un contador JS que funciona cuando se llega al nivel donde está ubicado (al usar el scroll). El contador funciona, pero hasta el momento solo lo he podido hacer funcionar o para decimales o para enteros, más no juntos.

Esto sería con decimales

// Counters
const counterElements = document.querySelectorAll(".get-started .counter");
function counter(target, start, stop) {
  // target.innerText = 0.1;
  const counterInterval = setInterval(() => {
    start += 0.1;
    const valueConverted = (Math.round(start * 100) / 100).toFixed(1);
    target.innerText = valueConverted;
    if (valueConverted == stop) {
      clearInterval(counterInterval);
    }
  }, 10);
}

function obCallBack(entries) {
  entries.forEach((entry) => {
    const { target } = entry;
    const stopValue = target.innerText;
    const startValue = 0;
    if (!entry.isIntersecting) return;
    counter(target, startValue, stopValue);
    counterObserver.unobserve(target);
  });
}

const counterObserver = new IntersectionObserver(obCallBack, { threshold: 1 });
counterElements.forEach((counterElem) => counterObserver.observe(counterElem));
/* get-started */
.get-started li {
    width: 100px;
    height: 100px;
    padding: 1.5rem;
    margin: 1.5rem auto;
    background-image: url(https://res.cloudinary.com/alexandracaulea/image/upload/v1583497341/circle-shape_fbgxd9.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.get-started strong {
    font-size: 2.2rem;
}

.get-started p {
    margin: 0;
    margin-top: 5px;
    font-size: 0.9rem;
}
<script src="https://kit.fontawesome.com/8db5c68b69.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<div id="get-started" class="get-started">
    <ul>
        <li>
            <i class="fa-solid fa-users fa-2x"></i>
            <p><strong class="counter">13.5</strong><strong>K+</strong></p>
            <p>Miembros Activos</p>
        </li>
        <li>
            <i class="fa-solid fa-heart fa-2x"></i>
            <p><strong class="counter">19.2</strong><strong>M+</strong></p>
            <p>Likes a Usuarios</p>
        </li>
        <li>
            <i class="fa-solid fa-user-check fa-2x"></i>
            <p><strong class="counter">11.1</strong><strong>B+</strong></p>
            <p>Valoraciones totales</p>
        </li>
    </ul>
</div>

Vuelvo y repito, funciona con decimales, pero que pasa cuando la data puede venir tanto en decimales como en enteros?

Yo tengo una función que me formatea los números acortándolos y colocándoles la unidad a la que pertenecen

public function shortNumber($num){
    $units = ['', 'k', 'm', 'b', 't'];
    for ($i = 0; $num >= 1000; $i++) {
        $num /= 1000;
    }
    /* Devuelvo todo el dato junto */
    // return round($num, 1) . $units[$i];

    /* Devuelvo primero el numero y luego la unidad */
    return [round($num, 1), $units[$i]];
}

$users = 33;
$likes = 1229;
$reviews = 19851229;
echo $dev_users = 'users '.$helpers->shortNumber($users)[0].$helpers->shortNumber($users)[1];
echo $dev_likes = ' | likes '.$helpers->shortNumber($likes)[0].$helpers->shortNumber($likes)[1];
echo $dev_reviews = ' | reviews '.$helpers->shortNumber($reviews)[0].$helpers->shortNumber($reviews)[1];

El resultado del código anterior es

users 33 | likes 1.2k | reviews 19.9m

Y es acá cuando tengo un problema porque este código puede devolver números enteros y decimales, entonces, si al código JS anterior yo cambio las lineas

// start += 0.1;
start += 1;
// const valueConverted = (Math.round(start * 100) / 100).toFixed(1);
const valueConverted = (Math.round(start * 100) / 100);

Entonces, el código funciona para enteros, y funciona bien, pero es obvio que cuando llegue a tener un decimal (después de mil) no funcionará y siguirá contando hasta el infinito.

Lo mismo pasa en el primer código (el del snippet) si le paso un entero como parámetro o un numero como (12.0) no funciona.

Entre tantas referencias que he leído he analizado este topic de SOes y también este Video de Youtube sobre algunas formas de crear el contador con el efecto scroll pero en cada una de las veces el resultado es el mismo, incluso usando la Liberia CountUp sucede que solo trabaja en base a un tipo de dato numérico.

Tienen alguna idea de como puedo hacer para que pueda obtener el resultado que quiero??

5
  • El problema es que "13.0" no es lo mismo que 13. Castea ambos valores a número por ejemplo de esta manera tan rápida: if (+valueConverted == +stop) {... y listo (Técnicamente solo tendrías que castear el stop pues valueConverted viene de una operación y debería ser numérico ya). Al leer valores del stop a partir del innerText los lees como string :) Por cierto... llamar a esto "optimizar" es darle una buena patada al diccionario. Yo más bien le llamaría arreglar... no estás optimizando nada (optimizar = hacer funcionar mejor... algo que no funciona no es optimizable)
    – Benito-B
    Commented el 25 sept. a las 20:05
  • Hola Yenn, como yo lo veo el problema que planteas se soluciona con const valueConverted = (Math.round(start * 10) / 10);, ya que incrementas 0.1. No necesitas utilizar .toFixed(1). Por otro lado, me parece que el tiempo que le toma al código llegar a cualquier número mayor a 100 es exagerado, deberías considerar "la distancia" (de cero a x) y "el tiempo" (en cuantos segundos) para determinar "la velocidad" (de a cuánto necesitas incrementar) para que no se vuelva eterno.
    – Marcos
    Commented el 25 sept. a las 20:47
  • @Benito-B claro que funciona, lo dije dos veces. Funciona en una u otra forma, pero funciona, no leíste?? Y yo nunca dije que 13 fuera igual que 13.0, dije que en esos casos no funciona como yo quiero que funcione.
    – Yenn
    Commented el 26 sept. a las 12:13
  • @Marcos, el problema es que JS no es mi fuerte (lo digo a cada rato), yo se que al tener un numero arriba de 100 se tarda, pero no he encontrado la forma de decirle al código que termine en X segundos, yo pensaba que la linea de }, 10); indicaba que terminara en 1 segundo o 10 (la verdad no lo se) pero no, sigue y sigue hasta llegar al final. Como haría usted para decirle al código que aunque sea 999 termine de contar en 5 segundos (por ejemplo) 😬 Por cierto, cuando he intentado incrementar en 0.5, el código no funciona para nada, es algo que ya había pensado, o incluso incrementar en 1
    – Yenn
    Commented el 26 sept. a las 12:17
  • @Yenn, la respuesta a tu pregunta actual ya la tenes. Ahora el escenario cambió ya que buscas otras cosas, como modificar el incremento o que termine en x segundos... debería modificar la pregunta para recibir una respuesta acorde "los nuevos problemas". PD: Ya te di una pista de como llegar a la solución (solo quedaría realizar un par de ajustes en el código)
    – Marcos
    Commented el 26 sept. a las 14:32

2 respuestas 2

1

Esta línea:

const valueConverted = (Math.round(start * 100) / 100);

Cambiala por esta otra

const valueConverted = parseFloat((Math.round(start * 100) / 100));

Con eso te va a funcionar no importa si counter es entero o es un tiene decimales, yo probé el código y me funcionó, espro te sirva, saludos

1
  • 1
    Bien, este me parece el método mas optimo, con lo que dijo Benito, cuando el numero es entero quedaba en 33.0 pero al parsearlo con parseFloat queda 33. En cuanto me ayude Marcos a solventar el excesivo tiempo de ejecución le daré por aceptada esta respuesta. Gracias
    – Yenn
    Commented el 26 sept. a las 12:23
1

@Yenn te dejo algo que te ayudará con lo que aun necesitas, yo uso un código similar para mis contadores, lo he modificado para que se asemeje al tuyo.

const counterElements = document.querySelectorAll(".get-started .counter");
let isActive = true;

function easeOutExpo(t) {
    return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
}

function counter(target, start, stop) {
    const totalDuration = 3000; // Total duration
    const totalIncrements = Math.ceil((stop - start) * 10);
    let currentIncrement = 0;

    const counterInterval = setInterval(() => {
        if (!isActive) {
            clearInterval(counterInterval);
            return;
        }

        const t = currentIncrement / totalIncrements;
        const easedValue = easeOutExpo(t) * (stop - start) + start;
        const valueConverted = parseFloat((Math.round(easedValue * 10) / 10));
        target.innerText = valueConverted;

        currentIncrement++;

        if (valueConverted >= stop) {
            clearInterval(counterInterval);
        }
    }, totalDuration / totalIncrements);

    setTimeout(() => {
        isActive = false;
        clearInterval(counterInterval);
        target.innerText = stop;
    }, totalDuration);
}

function obCallBack(entries) {
    entries.forEach((entry) => {
        const { target } = entry;
        const stopValue = parseFloat(target.innerText);
        const startValue = 0;
        if (!entry.isIntersecting) return;
        counter(target, startValue, stopValue);
        counterObserver.unobserve(target);
    });
}

const counterObserver = new IntersectionObserver(obCallBack, { threshold: 1 });
counterElements.forEach((counterElem) => counterObserver.observe(counterElem));
/* get-started */
.get-started li {
    width: 100px;
    height: 100px;
    padding: 1.5rem;
    margin: 1.5rem auto;
    background-image: url(https://res.cloudinary.com/alexandracaulea/image/upload/v1583497341/circle-shape_fbgxd9.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.get-started strong {
    font-size: 2.2rem;
}

.get-started p {
    margin: 0;
    margin-top: 5px;
    font-size: 0.9rem;
}
<script src="https://kit.fontawesome.com/8db5c68b69.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div id="get-started" class="get-started">
    <ul>
        <li>
            <i class="fa-solid fa-users fa-2x"></i>
            <p><strong class="counter">13.5</strong><strong>K+</strong></p>
            <p>Miembros Activos</p>
        </li>
        <li>
            <i class="fa-solid fa-heart fa-2x"></i>
            <p><strong class="counter">19.2</strong><strong>M+</strong></p>
            <p>Likes a Usuarios</p>
        </li>
        <li>
            <i class="fa-solid fa-user-check fa-2x"></i>
            <p><strong class="counter">11.1</strong><strong>B+</strong></p>
            <p>Valoraciones totales</p>
        </li>
    </ul>
</div>

Te explico brevemente, con esto, el contador va a respetar que todo el script se ejecute en 3 segundos con const totalDuration = 3000; y luego tengo la función easeOutExpo() que añade un inicio rápido y acabado lento para que el lector vea y tenga un mejor efecto de contador.

1
  • Gracias, justo le que necesitaba 😁
    – Yenn
    Commented el 28 sept. a las 11:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.