Quiero insertar las comas apropiadamente entre los números. ej: 6,350
¿Hay alguna manera de que pueda lograr esto en el siguiente escenario?
setTimeout(function () { $('.number-counter').each(function () { $(this).addClass('inView'); }); }, 500); @property --num { syntax: "<integer>"; initial-value: 0; inherits: false; } .number-counter { transition: --num 3s; counter-set: num var(--num); font: 800 40px system-ui; } .number-counter::after { content: counter(num); } .number-counter.inView { --num: var(--count); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="number-counter" style="--count: 6350;"></div>Intenté agregar este código en CSS pero no hay forma de contar los dígitos en CSS, así que agregué la coma (,) usando jQuery. Espero que esto ayude. Agregará la coma después de 3 dígitos.
setTimeout(function () { jQuery('.number-counter').each(function () { jQuery(this).addClass('inView'); var $this = jQuery(this); countTo = $this.attr('data-count'); jQuery({ countNum: $this.text()}).animate({countNum: countTo}, { easing: 'linear', step: function() { $this.text(commaSeparateNumber(Math.ceil(this.countNum))); }, complete: function() { $this.text(commaSeparateNumber(Math.ceil(this.countNum))); } }); }); }, 500); function commaSeparateNumber(val) { while (/(\d+)(\d{3})/.test(val.toString())) { val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2'); } return val; } @property --num { syntax: "<integer>"; initial-value: 0; inherits: false; } .number-counter { transition: --num 3s; counter-set: num var(--num); font: 800 40px system-ui; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="number-counter" style="--count: 6350;" data-count="6350"></div>