如何使这个jquery countUP使用格式化的数字？

Question

我有一个非常好用的jQuery计数器。唯一的问题是，当我在data-target中有一个格式化的数字（例如。10,000而不是10000）时，它不起作用并显示NaN。

我不知道要修改什么，因此它也最多可以计算10,000,000，而不仅仅适用于10000000。

$('.counter').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');

  $({
    countNum: $this.text()
  }).animate({
    countNum: countTo
  }, {
    duration: 8000,
    easing: 'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
      //alert('finished');
    }
  });
});

body {
  background-color: #F46A6A;
  color: #fff;
  max-width: 800px;
  margin: 100px auto 0;
  text-align: center;
  display: table;
}

.counter {
  display: table-cell;
  margin: 1.5%;
  font-size: 50px;
  background-color: #FF6F6F;
  width: 200px;
  border-radius: 50%;
  height: 200px;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="counter" data-count="150">0</div>
<div class="counter" data-count="85">0</div>
<div class="counter" data-count="10,000,000">0</div>

Answer 1

要使号码有效，您需要删除逗号。您可以使用replace()执行此操作：

countTo = $this.attr('data-count').replace(/,/g, '');

  

我希望实际显示“10,000,000”。它应该计为“10,000,000”并输出“10,000,000”

在这种情况下，您可以使用this question中的函数格式化step和complete输出中的数字：

$('.counter').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count').replace(/,/g, '');

  $({
    countNum: $this.text()
  }).animate({
    countNum: countTo
  }, {
    duration: 8000,
    easing: 'linear',
    step: function() {
      $this.text(numberWithCommas(Math.floor(this.countNum)));
    },
    complete: function() {
      $this.text(numberWithCommas(this.countNum));
    }
  });
});

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

body {
  background-color: #F46A6A;
  color: #fff;
  max-width: 800px;
  margin: 100px auto 0;
  text-align: center;
  display: table;
}

.counter {
  display: table-cell;
  margin: 1.5%;
  font-size: 50px;
  background-color: #FF6F6F;
  width: 200px;
  border-radius: 50%;
  height: 200px;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="counter" data-count="150">0</div>
<div class="counter" data-count="85">0</div>
<div class="counter" data-count="10,000,000">0</div>