Counter with thousands separator

Question

So I have used this counter to count to a specific number :

    (function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});

        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;

        return $(this).each(function() {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);

            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals));

                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }

                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;

                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,  // the number the element should start at
        to: 100,  // the number the element should end at
        speed: 1000,  // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,  // the number of decimal places to show
        onUpdate: null,  // callback method for every time the element is updated,
        onComplete: null,  // callback method for when the element finishes updating
    };
})(jQuery);

jQuery(function($) {
        $('.timer').countTo({
            from: 50,
            to: 2500,
            speed: 5000,
            refreshInterval: 50,
            onComplete: function(value) {
                console.debug(this);
            }
        });
    });

http://jsfiddle.net/YWn9t/

But unfortunately there are no separators (dots) between every third numbers. To sum up: How to make the output of the script from e.g. 1000000 to 1.000.000?

Possible duplicate of [How to print a number with commas as thousands separators in JavaScript](http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript) — Wowsk, Mar 10 '16 at 19:07

score 2 · Accepted Answer · answered Mar 10 '16 at 18:15

2

I recommend using numberFormatter.

console.log(new Intl.NumberFormat().format(123456));

answered Mar 10 '16 at 18:15

jkordas

155
6

1

Caveat: this is not supported in IE < 11, and it is not supported in Safari. Not sure if this affects @manuel though. – Calvin Belden Mar 10 '16 at 18:26
If your browser does not support Intl natively you can use a [Intl.js](https://github.com/andyearnshaw/Intl.js) polyfill. – jkordas Mar 10 '16 at 18:34

Counter with thousands separator

1 Answers1