Luchando con este, por lo que cualquier idea o sugerencia es realmente apreciada.
Tengo un calculo (de trabajo) que cuenta cuantos dias han pasado desde el 01/01/2021 y * por un valor. Me gustaría animar desde 0 hasta el valor durante un período de 3 segundos, sin embargo, no sé cómo sortear las comas, puedo hacer que funcione sin ellas.
¿Alguna sugerencia?
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 = (commaSeparateNumber(answer)); <p id="CCalc" class="fig-number"></p>Aquí está el código con jQuery:
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>