Estoy intentando agregar una animación de conteo usando javascript en mi página. Pude obtener una solución funcional, pero el contador deja de funcionar si el número tiene una coma, por ejemplo: 53,210 el contador mostrará 53 . ¿Cómo puedo tener la animación del contador con números que tienen una coma?
Aquí hay un fragmento de código:
window.onload = function() { runAnimations(); }; // How long you want the animation to take, in ms const animationDuration = 2000; // Calculate how long each 'frame' should last if we want to update the animation 60 times per second const frameDuration = 1000 / 60; // Use that to calculate how many frames we need to complete the animation const totalFrames = Math.round( animationDuration / frameDuration ); // An ease-out function that slows the count as it progresses const easeOutQuad = t => t * ( 2 - t ); // The animation function, which takes an Element const animateCountUp = el => { let frame = 0; const countTo = parseInt( el.innerHTML, 10 ); // Start the animation running 60 times per second const counter = setInterval( () => { frame++; // Calculate our progress as a value between 0 and 1 // Pass that value to our easing function to get our // progress on a curve const progress = easeOutQuad( frame / totalFrames ); // Use the progress value to calculate the current count const currentCount = Math.round( countTo * progress ); // If the current count has changed, update the element if ( parseInt( el.innerHTML, 10 ) !== currentCount ) { el.innerHTML = currentCount; } // If we've reached our last frame, stop the animation if ( frame === totalFrames ) { clearInterval( counter ); } }, frameDuration ); }; // Run the animation on all elements with a class of 'countup' const runAnimations = () => { const countupEls = document.querySelectorAll( '.countup' ); countupEls.forEach( animateCountUp ); }; <ul> <li><span class="countup">45</span></li> <li><span class="countup">110</span></li> <li><span class="countup">53,210</span></li> </ul> Espero que el HTML muestre el número completo de 53,210 con la animación de conteo ascendente. No te detengas en el número antes de la coma.
Agregar .toLocaleString('en-US'); a su const currentCount para que la animación contenga una coma de acuerdo con el sistema numérico de EE. UU.
Vea esto para .toLocaleString('en-US');
Si desea usar una coma en la clase también, use .replace(',', '') para eliminar la coma cuando se ingresan los valores de función. Además, si los valores contienen más de 1 coma, use el atributo global de esta .replace(/\,/g, '')
Ver esto para expresiones regulares
window.onload = function() { runAnimations(); }; // How long you want the animation to take, in ms const animationDuration = 2000; // Calculate how long each 'frame' should last if we want to update the animation 60 times per second const frameDuration = 1000 / 60; // Use that to calculate how many frames we need to complete the animation const totalFrames = Math.round(animationDuration / frameDuration); // An ease-out function that slows the count as it progresses const easeOutQuad = t => t * (2 - t); // The animation function, which takes an Element const animateCountUp = el => { let frame = 0; const countTo = parseInt(el.innerHTML.replace(/\,/g, ''), 10); // Start the animation running 60 times per second const counter = setInterval(() => { frame++; // Calculate our progress as a value between 0 and 1 // Pass that value to our easing function to get our // progress on a curve const progress = easeOutQuad(frame / totalFrames); // Use the progress value to calculate the current count const currentCount = Math.round(countTo * progress).toLocaleString('en-US');; // If the current count has changed, update the element if (parseInt(el.innerHTML, 10) !== currentCount) { el.innerHTML = currentCount; } // If we've reached our last frame, stop the animation if (frame === totalFrames) { clearInterval(counter); } }, frameDuration); }; // Run the animation on all elements with a class of 'countup' const runAnimations = () => { const countupEls = document.querySelectorAll('.countup'); countupEls.forEach(animateCountUp); }; <ul> <li><span class="countup">45</span></li> <li><span class="countup">110</span></li> <li><span class="countup">53,210</span></li> <li><span class="countup">5,3,2,1,0</span></li> <li><span class="countup">53,215480</span></li> </ul>Puede intentar eliminar el , de la entrada antes de continuar con el resto del código. Algo del estilo de:
// get input as string from HTML const formattedNumber = el.innerHTML; // Format as number input (removes commas) const inputNumber = formattedNumber.replace(/\,/g,''); const countTo = new Number(inputNumber);Ver demostración
window.onload = function() { runAnimations(); }; // How long you want the animation to take, in ms const animationDuration = 2000; // Calculate how long each 'frame' should last if we want to update the animation 60 times per second const frameDuration = 1000 / 60; // Use that to calculate how many frames we need to complete the animation const totalFrames = Math.round(animationDuration / frameDuration); // An ease-out function that slows the count as it progresses const easeOutQuad = t => t * (2 - t); // The animation function, which takes an Element const animateCountUp = el => { let frame = 0; // get input as string from HTML const formattedNumber = el.innerHTML; // Format as number input (removes commas) const inputNumber = formattedNumber.replace(/\,/g,''); const countTo = new Number(inputNumber); // Start the animation running 60 times per second const counter = setInterval(() => { frame++; // Calculate our progress as a value between 0 and 1 // Pass that value to our easing function to get our // progress on a curve const progress = easeOutQuad(frame / totalFrames); // Use the progress value to calculate the current count const currentCount = Math.round(countTo * progress); // If the current count has changed, update the element if (parseInt(el.innerHTML, 10) !== currentCount) { el.innerHTML = currentCount; } // If we've reached our last frame, stop the animation if (frame === totalFrames) { clearInterval(counter); } }, frameDuration); }; // Run the animation on all elements with a class of 'countup' const runAnimations = () => { const countupEls = document.querySelectorAll('.countup'); countupEls.forEach(animateCountUp); }; <ul> <li><span class="countup">45</span></li> <li><span class="countup">110</span></li> <li><span class="countup">53,210</span></li> </ul>Necesito parseInt con coma. :
parseInt(el.innerHTML.replace(/,/g, ''), 10)También se muestra con coma la necesidad de seguir el cambio de línea.
el.innerHTML = currentCount.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");Verifique el siguiente código.
window.onload = function() { runAnimations(); }; // How long you want the animation to take, in ms const animationDuration = 2000; // Calculate how long each 'frame' should last if we want to update the animation 60 times per second const frameDuration = 1000 / 60; // Use that to calculate how many frames we need to complete the animation const totalFrames = Math.round( animationDuration / frameDuration ); // An ease-out function that slows the count as it progresses const easeOutQuad = t => t * ( 2 - t ); // The animation function, which takes an Element const animateCountUp = el => { let frame = 0; const countTo = parseInt(el.innerHTML.replace(/,/g, ''), 10); // Start the animation running 60 times per second const counter = setInterval( () => { frame++; // Calculate our progress as a value between 0 and 1 // Pass that value to our easing function to get our // progress on a curve const progress = easeOutQuad( frame / totalFrames ); // Use the progress value to calculate the current count const currentCount = Math.round( countTo * progress ); // If the current count has changed, update the element if ( parseInt( el.innerHTML, 10 ) !== currentCount ) { el.innerHTML = currentCount.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); } // If we've reached our last frame, stop the animation if ( frame === totalFrames ) { clearInterval( counter ); } }, frameDuration ); }; // Run the animation on all elements with a class of 'countup' const runAnimations = () => { const countupEls = document.querySelectorAll( '.countup' ); countupEls.forEach( animateCountUp ); }; <ul> <li><span class="countup">45</span></li> <li><span class="countup">110</span></li> <li><span class="countup">53,210</span></li> </ul>