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??
if (+valueConverted == +stop) {...
y listo (Técnicamente solo tendrías que castear elstop
puesvalueConverted
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)const valueConverted = (Math.round(start * 10) / 10);
, ya que incrementas0.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 a100
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.}, 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