JS逗号千位计数器吗？

Question

我正在工作的网站上有一个工作号码计数器部分，我不太了解JS，我有一些可以工作的代码，但是它破坏了前端并停止了计数器。 我希望有人能帮助我理解如何正确地整理我的作品。

我已经分别或一起尝试了两个功能，可能不正确。 第二个处理千位逗号的功能，但是它取消了前端和计数功能。

我不确定#shiva元素发生了什么，但是我已将其整体替换为#counter，因为该功能可以全面使用，而不仅仅是一个div元素。 我刚刚离开了这两个地方，以防万一还有另一种方式。

HTML：

<div id="counter">
    <div class="row">
        <div class="col span-1-of-2">
            <div class="row">
                <div id="shiva"><span class="count">1688019</span></div>
                <h2>Text</h2>
            </div>

            <div class="row">
                <div id="shiva"><span class="count">82150</span></div>
                <h2>Text</h2>
            </div>
        </div>

        <div class="col span-1-of-2">
            <div class="row">
                <div id="shiva"><span class="count">10505</span></div>
                <h2>Text</h2>
            </div>

            <div class="row">
                <div id="shiva"><span class="count">168260</span></div>
                <h2>Text</h2>
            </div>

        </div>
    </div>
    </div>

计数器：

$('.count').each(function () {
    $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
    }, {
        duration: 2000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

分隔器：

    function numberWithCommas(number) {
    var parts = number.toString().split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return parts.join('.');
}

$('#counter').each(function () {
    var num = $(this).text();
    var commaNum = numberWithCommas(num);
    $(this).text(commaNum);
});

Answer 1

有人用类似的例子回答了，以逗号分隔成千上万，您只需要适应您的情况即可。 在这里阅读如何在JavaScript中以千位分隔符的形式打印带逗号的数字

制作动画后，您需要更换它的计数器，

 $('.count').each(function () {
        $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
        }, {
            duration: 2000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
                $(this).text(convert($(this).text()))
            }
        });
    });

脚步：

• 遍历每个.count元素
• 用我们的函数返回结果替换每个.count数字
• 我们的函数使用regexp格式化字符串，进行合并和连接
• 将.count中的值设置为我们的新结果

例

 const convert = str => { // Find the number let regx = /(\\d{1,3})(\\d{3}(?:,|$))/; // Set a variable let currStr; // Start loop do { // Replace current string, split it currStr = (currStr || str.split(`.`)[0]) .replace(regx, `$1,$2`) } while (currStr.match(regx)); // Loop // Return our result from function return (str.split(`.`)[1]) ? currStr.concat(`.`, str.split(`.`)[1]) : currStr; }; function total() { let total = 0; $('.count').each(function() { let v = parseInt($(this).text()); total = v + total }) return total; } $('.count').each(function () { $(this).prop('Counter', 0).animate({ Counter: $(this).text() }, { duration: 2000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); $(this).text(convert($(this).text())) } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="counter"> <div class="row"> <div class="col span-1-of-2"> <div class="row"> <div id="shiva"><span class="count">1688019</span></div> <h2>Text</h2> </div> <div class="row"> <div id="shiva"><span class="count">82150</span></div> <h2>Text</h2> </div> </div> <div class="col span-1-of-2"> <div class="row"> <div id="shiva"><span class="count">10505</span></div> <h2>Text</h2> </div> <div class="row"> <div id="shiva"><span class="count">168260</span></div> <h2>Text</h2> </div> </div> </div> </div>