请求为数字添加千位分隔符的jQuery代码方案及放置指导

Hey there! I see you've been struggling to get number separators working with your scroll-triggered counter animation—let's get this sorted out for you.

The core issue with your current code is that it's just outputting the raw rounded number without any formatting. We'll add a simple number formatting function and integrate it into your animation's step callback, which is where the counter updates happen.

Step 1: Add the Number Formatting Function #

First, let's create a reusable function that takes a number and returns it as a string with commas as thousands separators. This works for millions, billions, etc., too:

function formatNumber(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

Step 2: Integrate It Into Your Counter Code #

Now, update your existing counter script to use this function when updating the text. Also, make sure your code runs after the DOM is fully loaded (wrapping it in jQuery(document).ready() prevents issues with elements not being found yet).

Here's the full modified code:

jQuery(document).ready(function() {
    // Number formatting function
    function formatNumber(num) {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }

    jQuery(window).scroll(startCounter);

    function startCounter() {
        var hT = jQuery('.counter').offset().top, 
            hH = jQuery('.counter').outerHeight(), 
            wH = jQuery(window).height();
        
        if (jQuery(window).scrollTop() > hT + hH - wH) {
            jQuery(window).off("scroll", startCounter);
            
            jQuery('.counter').each(function () {
                var $this = jQuery(this);
                jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                    duration: 4000,
                    easing: 'swing',
                    step: function () {
                        // Use our formatting function here
                        $this.text(formatNumber(Math.ceil(this.Counter)));
                    }
                });
            });
        }
    }
});

Where to Place This Code #

• You can put this directly inside a <script> tag at the end of your HTML body (right before </body>) to ensure all elements are loaded before the script runs.
• Alternatively, add it to an external JavaScript file that's loaded after jQuery (since you're using jQuery, make sure jQuery is included before this script).

How It Works #

• The formatNumber function uses a regex to insert commas every three digits from the right—perfect for thousands, millions, and larger numbers.
• We call this function inside the step callback of the animation, so every time the counter updates, the number gets formatted immediately.

Test it out with numbers like 1234, 567890, or 1234567—you'll see they display as 1,234, 567,890, and 1,234,567 respectively!

内容的提问来源于stack exchange，提问作者Webedelic