Question

我想用逗号显示大于一千的数字，但我不能，因为当我使用CountTo插件中的number_format时，该数字显示为NaN。

这是我的代码（代码有效;我只想添加逗号）

<div class="col-xs-6 col-sm-3">
    <div class="font-w700 text-gray-darker animated fadeIn">SickGen Users</div>
    <div class="text-muted animated fadeIn"><small><i class="si si-user"></i> Total</small></div>
    <a class="h2 font-w300 text-primary animated flipInX" data-toggle="countTo" data-to="<?php echo $totalusers;?>"></a>
</div>
<div class="col-xs-6 col-sm-3">
    <div class="font-w700 text-gray-darker animated fadeIn">Alts Database</div>
    <div class="text-muted animated fadeIn"><small><i class="si si-list"></i> Total</small></div>
    <a class="h2 font-w300 text-primary animated flipInX" data-toggle="countTo" data-to="<?php echo $totalalts;?>"></a>
</div>
<div class="col-xs-6 col-sm-3">
    <div class="font-w700 text-gray-darker animated fadeIn">Generators</div>
    <div class="text-muted animated fadeIn"><small><i class="fa fa-spinner"></i> Total</small></div>
    <a class="h2 font-w300 text-primary animated flipInX" data-toggle="countTo" data-to="<?php echo $totalgens;?>"></a>
</div>
<div class="col-xs-6 col-sm-3">
    <div class="font-w700 text-gray-darker animated fadeIn">Alts Generated</div>
    <div class="text-muted animated fadeIn"><small><i class="si si-refresh"></i> Total</small></div>
    <a class="h2 font-w300 text-primary animated flipInX" data-toggle="countTo" data-to="<?php echo $generated;?>"></a>
</div>

在这里你可以看到它现在的样子（当然你不能看到计数效果）

这就是我希望它看起来像

你能帮我添加逗号吗？

脚本

 App.initHelper('appear-countTo');
     *
     */
    var uiHelperAppearCountTo = function(){
        // Init counter functionality
        jQuery('[data-toggle="countTo"]').each(function(){
            var $this       = jQuery(this);
            var $after      = $this.data('after');
            var $before     = $this.data('before');
            var $speed      = $this.data('speed') ? $this.data('speed') : 1500;
            var $interval   = $this.data('interval') ? $this.data('interval') : 15;

            $this.appear(function() {
                $this.countTo({
                    speed: $speed,
                    refreshInterval: $interval,
                    onComplete: function() {
                        if($after) {
                            $this.html($this.html() + $after);
                        } else if ($before) {
                            $this.html($before + $this.html());
                        }
                    }
                });
            });
        });
    };

Answer 1

formatter(value, options)

的文档中有countTo个配置选项

$this.countTo({
  speed: $speed,
  refreshInterval: $interval,
  onComplete: function() {
    if ($after) {
      $this.html($this.html() + $after);
    } else if ($before) {
      $this.html($before + $this.html());
    }
  },
  formatter: function(value, options) {
    //default: return value.toFixed(options.decimals);
    return value.toFixed(options.decimals).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
});

格式代码取自this StackOverflow answer，适用于任何小数位数为3或更少的数字。

展示它是如何运作的：

＆＃13;

function numberWithCommas(x) {
    return x.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

console.log(numberWithCommas(13718))

＆＃13;

Jquery counto插件number_format

1 个答案: