如何在此框中插入逗号？

Question

在此输入图片描述

如何在此框中插入逗号 , ？ 我想在这个计数器中添加逗号。我使用了这个网站的代码https://github.com/MikhaelGerbet/jquery-incremental-counter 但我不能让它有逗号。请帮我。谢谢。

/*
 Plugin Name: jQuery plugin incremental counter
 Plugin URI: https://github.com/MikhaelGerbet/jquery-incremental-counter
 Description: jQuery plugin incremental counter is a simple counter animated
 Author: GERBET Mikhael
 Author URI: https://github.com/MikhaelGerbet
 License: MIT
 */

(function($){
    $.fn.incrementalCounter = function(options){
        //default options
        var defauts = {
                "digits": 4
            },
            pad = function(n, width, z) {
                z = z || '0';
                n = n + '';
                return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
            },
            start = function(element){

                var current_value = parseInt($(element).data('current_value')),
                    end_value = parseInt($(element).data('end_value')),
                    current_speed = 20;

                if(end_value === 0) {
                    return false;
                }


                if (end_value - current_value < 5){
                    current_speed = 200;
                    current_value += 1;
                } else if(end_value - current_value < 15){
                    current_speed = 50;
                    current_value += 1
                } else if(end_value - current_value < 50){
                    current_speed = 25;
                    current_value += 3
                } else{
                    current_speed = 25;
                    current_value += parseInt((end_value - current_value)/24)
                }

                $(element).data({
                    current_value:current_value
                });

                if(current_speed){
                    setTimeout(function(){
                        display($(element),current_value);
                    },current_speed);
                }else{
                    display($(element),current_value);
                }
            },
            display = function(element,value){
                var padedNumber = pad(value, element.data('digits')),
                    exp = padedNumber.split(""),
                    end_value = $(element).data('end_value'),
                    nums = $(element).find('.num');
                $(exp).each(function(i,e){
                    $(nums[i]).text(exp[i]);
                });

                if(end_value != value){
                    start(element);
                }
            },
            //merge options
            options = $.extend(defauts, options);

        this.each(function(index, element){

            var default_digits = options.digits ,
                digits =  element.getAttribute('data-digits') ?  element.getAttribute('data-digits') : default_digits ,
                end_value = parseInt( element.getAttribute('data-value'));

            digits = digits === 'auto' || digits < String(end_value).length ? String(end_value).length : digits;

            //get value
            $(element).data({
                current_value : 0,
                end_value : end_value,
                digits : digits,
                current_speed : 0
            });

            //add number container
            for(var i=0 ; i < digits ; i++){
                $(element).append('<div class="num">0</div>');
            }

            start($(element));

        });
        return this;
    };
})(jQuery);

如何在此框中插入逗号 , ？

我想根据图像中的位置添加逗号。

Answer 1

        //add number container
        for(var i=0 ; i < digits ; i++){
            $(element).append('<div class="num">0</div>');
        }

此循环为每个数字插入一个 div 元素。如果您想插入在这些元素之间保留逗号的实际元素，则必须修改实际的插件代码。

更好的选择是使用 CSS 伪元素来插入它们。此实现已经使用

::before

伪元素作为蓝线，因此使用

::after

将对现有设置造成的“损害”最小。您可以使用选择器

.incremental-counter .num:nth-last-child(3n+1):not(:last-child)::after

将 after 元素插入到正确的元素中 - 然后您仍然需要做的就是适当地定位和格式化它们。

.incremental-counter .num:not(:last-child) {
  margin-right: .25em; // add a bit more space between the digits
}
.incremental-counter .num:nth-last-child(3n+1):not(:last-child)::after {
  position: absolute;
  content: ",";
  font-size: .5em;
  left: calc(100% + .25em);
  bottom: -20%;
}

https://jsfiddle.net/cro8vyzn/2/