javascript - 动画数字计数器不添加逗号

Question

我有一个数字计数器，可以从 0 计数到指定值。目前它适用于固定小数点，但如果值超过 1,000，则不会添加逗号(例如，如果我输入 10000，我应该期望 10,000，但它当前返回 10000.00)。

有人可以帮我解决这个问题吗？我已经提供了执行此操作的完整函数，但是运行动画的唯一部分在以//ANIMATION STARTS HERE 开头的注释中详细说明。

提前谢谢您!

numbersAnimate(_Panel) {

    if (!_Panel) {
      return;
    }

    const _Document = document.documentElement;
    let lang = _Document.getAttribute('lang');

    const _PanelAmounts = _Panel.querySelectorAll('.panel__amount');
    if (!_PanelAmounts) {
      return;
    }

    for (const _PanelAmount of _PanelAmounts) {

      const $PanelAmount = $(_PanelAmount);

      const value = $PanelAmount.data('amount');

      if (!value || value.length < 1) {
        return;
      }

      if (isNaN(value)) {
        return;
      }



      //ANIMATION STARTS HERE....
      $PanelAmount.prop('Counter', 0).animate({
        Counter: value
      }, {
        duration: 1000,
        easing: 'linear',
        step: function(now) {
          $PanelAmount.text(this.Counter.toFixed(2));
        }
      });

    }

    _Panel.classList.add('animated');





    //JSON Structure

    "statistic": {
      "amount": "10000",
      "symbol": "%"
    },

<span className="panel__amount panel-text-style-c" data-amount={jsonData.statistic.amount}>0</span>

Answer 1

您可以使用 toLocaleString()

var number = 1547885415.235489654

console.log('Correctly formated number : ', number.toLocaleString('en-US', {maximumFractionDigits: 2}));