Question

我想使用jQuery从页面中选择多个数字，加载动画，然后将数字转换为易于阅读的格式（如果它太长）。

我能够制作动画效果并重新格式化工作，但是当我尝试将它们组合在一起时，我很难做到这一点。有人可以帮我理解我做错了什么，或者这有可能实现我想做的事情吗？谢谢你的帮助。

HTML：

<div class="stat-display__value">22200</div>
<div class="stat-display__value">338899</div>

使用Javascript：

$('.stat-display__value').each(function(){
  $(this).prop('Counter',0).animate({
      Counter: $(this).text()
  }, {
     duration: 1000,
     easing: 'swing',
     step: function (now) {
           $(this).text(Math.ceil(now));
  }
 });
 num = nFormatter($(this).text(), 2);
 $(this).html(num);
});

function nFormatter(num, digits) {
  const si = [
    { value: 1, symbol: "" },
    { value: 1E3, symbol: "K" },
    { value: 1E6, symbol: "M" },
    { value: 1E9, symbol: "G" },
    { value: 1E12, symbol: "T" },
    { value: 1E15, symbol: "P" },
    { value: 1E18, symbol: "E" }
  ];
  const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
  let i;
  for (i = si.length - 1; i > 0; i--) {
    if (num >= si[i].value) {
      break;
    }
  }
  return (num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol;
}

以下是JS bin上的演示代码： https://jsbin.com/ceqemag/edit?html,js,output

Answer 1

您当前的代码仅在运行时格式化该数字，然后由step方法触发的.animate()回调快速覆盖该数字。您应该在step回调中格式化数字，即：

step: function (now) {
    var formattedValue = nFormatter(Math.ceil(now), 2);
    $(this).text(formattedValue);
}

请参阅下面的概念验证示例（或modified JSbin）：

＆＃13;

$('.stat-display__value').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 1000,
    easing: 'swing',
    step: function(now) {
      var formattedValue = nFormatter(Math.ceil(now), 2);
      $(this).text(formattedValue);
    }
  });
});

//reformat numbers
function nFormatter(num, digits) {
  const si = [{
      value: 1,
      symbol: ""
    },
    {
      value: 1E3,
      symbol: "K"
    },
    {
      value: 1E6,
      symbol: "M"
    },
    {
      value: 1E9,
      symbol: "G"
    },
    {
      value: 1E12,
      symbol: "T"
    },
    {
      value: 1E15,
      symbol: "P"
    },
    {
      value: 1E18,
      symbol: "E"
    }
  ];
  const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
  let i;
  for (i = si.length - 1; i > 0; i--) {
    if (num >= si[i].value) {
      break;
    }
  }
  return (num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stat-display__value">22200</div>
<div class="stat-display__value">338899</div>

＆＃13;

如何使用jQuery为数字设置动画并重新格式化（到K，M..etc）？

1 个答案: