javascript - 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

有人用类似的例子回答了数千个逗号，你只需根据你的情况进行调整即可。阅读此处How to print a number with commas as thousands separators in 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 数字
• 我们的函数使用正则表达式来格式化字符串、组合和连接
• 将 .count 中的值设置为我们的新结果

Example

  

 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>