Creé un poco de código que se anima al valor deseado (con comas) y funciona correctamente. Lo que no puedo resolver es cómo hacer que la animación comience en la ventana gráfica. He mirado otras respuestas, pero parece que no puedo hacer que funcione. Los pensamientos o sugerencias son muy apreciados.
var startDate = new Date('01-01-2021'); var today = new Date(); var diff = Math.floor((today - startDate)/(1000*60*60*24)) var dd = String(today.getDate()).padStart(2, '0'); var mm = String(today.getMonth() + 1).padStart(2, '0'); var yyyy = today.getFullYear(); today = mm + '/' + dd + '/' + yyyy; var answer = diff * 134256; function commaSeparateNumber(val){ while (/(\d+)(\d{3})/.test(val.toString())){ val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); } return val; } document.getElementById("CCalc").innerHTML = parseFloat(commaSeparateNumber(answer).replace(/,/g, '')); $(".fig-number").each(function () { $(this) .prop("Counter", 0) .animate( { Counter: $(this).text() }, { duration: 3000, easing: "swing", step: function (now, tween) { // Check added for decimal number if(parseInt(tween.end) == parseFloat(tween.end)){ var number = Math.ceil(now); $(this).text(number.toLocaleString()); } }, } ); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">. </script> <p id="CCalc" class="fig-number">39471264</p>la answer no está definida en esta línea:
document.getElementById("CCalc").innerHTML = parseFloat(commaSeparateNumber(answer).replace(/,/g, ''));Una vez que tienes eso en cuenta, la animación funciona.
function commaSeparateNumber(val) { while (/(\d+)(\d{3})/.test(val.toString())) { val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); } return val; } // created for reference const ccalc = document.getElementById("CCalc"); ccalc.innerText = parseFloat(commaSeparateNumber(ccalc.innerText).replace(/,/g, '')); $(".fig-number").each(function() { $(this) .prop("Counter", 0) .animate({ Counter: $(this).text() }, { duration: 3000, easing: "swing", step: function(now, tween) { // Check added for decimal number if (parseInt(tween.end) == parseFloat(tween.end)) { var number = Math.ceil(now); $(this).text(number.toLocaleString()); } }, }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p id="CCalc" class="fig-number">39471264</p>Lo resolvió. Aquí está el código de trabajo si alguien lo necesita.
<script type ="text/javascript"> var startDate = new Date('01-01-2021'); var today = new Date(); var diff = Math.floor((today - startDate)/(1000*60*60*24)) var dd = String(today.getDate()).padStart(2, '0'); var mm = String(today.getMonth() + 1).padStart(2, '0'); var yyyy = today.getFullYear(); today = mm + '/' + dd + '/' + yyyy; var answer = diff * 134256; function commaSeparateNumber(val){ while (/(\d+)(\d{3})/.test(val.toString())){ val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); } return val; } document.getElementById("CCalc").innerHTML = parseFloat(commaSeparateNumber(answer).replace(/,/g, '')); (function($){ $(function() { $(function($, win) { $.fn.inViewport = function(cb) { return this.each(function(i,el){ function visPx(){ var H = $(this).height(), r = el.getBoundingClientRect(), t=r.top, b=r.bottom; return cb.call(el, Math.max(0, t>0? Ht : (b<H?b:H))); } visPx(); $(win).on("resize scroll", visPx); }); }; }(jQuery, window)); jQuery(function($) { $(".fig-number").inViewport(function(px) { if(px>0 && !this.initNumAnim) { this.initNumAnim = true; $(this).prop('Counter',0).animate({ Counter: $(this).text() }, { duration: 1000, step: function (now, tween) { if(parseInt(tween.end) == parseFloat(tween.end)){ var number = Math.ceil(now); $(this).text(number.toLocaleString()); } } }); } }); }); }); })( jQuery ); </script>