动态添加单位(K，L，M)

Question

我正在使用jQuery在计数器上工作。现在，我正在尝试添加诸如K，L，M之类的单元，我收到了一个脚本，但是如何在无法找到的代码中实现。我的初始代码：

$('.count').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 4000,
    easing: 'swing',
    step: function(num) {
      $(this).text(Math.ceil(num));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div><span class="count">2000</span></div>
<div><span class="count">1000</span></div>

这是我在代码中要实现的stackoverflow上找到的链接在堆栈上找到链接，我尝试了这样的

$('.count').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 4000,
    easing: 'swing',
    step: function(num) {
      $(this).text(Math.ceil(num));
      if (num >= 1000000000) {
        //$(this).text(Math.ceil(num));
        return (num / 1000000000).toFixed(1).replace(/.0$/, '') + 'G';
      }
      if (num >= 1000000) {
        //$(this).text(Math.ceil(num));
        return (num / 1000000).toFixed(1).replace(/.0$/, '') + 'M';
      }
      if (num >= 100000) {
        //$(this).text(Math.ceil(num));
        return (num / 100000).toFixed(1).replace(/.0$/, '') + 'L';
      }
      if (num >= 1000) {
        //$(this).text(Math.ceil(num));
        return (num / 1000).toFixed(1).replace(/.0$/, '') + 'K';
      }
      return num;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div><span class="count">2000</span></div>
<div><span class="count">1000</span></div>

这里的计数器工作正常，但没有添加单位，任何人都可以建议如何附加这些单位。

Answer 1

这是因为您首先更新视图($(this).text(Math.ceil(num));(，然后进行计算。检查我的更新：

$('.count').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 4000,
    easing: 'swing',
    step: function(num) {
      var unit = Math.ceil(num);
      if (num >= 1000000000) {
        //$(this).text(Math.ceil(num));
        unit = (num / 1000000000).toFixed(1).replace(/.0$/, '') + 'G';
      } else if (num >= 1000000) {
        //$(this).text(Math.ceil(num));
        unit = (num / 1000000).toFixed(1).replace(/.0$/, '') + 'M';
      } else if (num >= 100000) {
        //$(this).text(Math.ceil(num));
        unit = (num / 100000).toFixed(1).replace(/.0$/, '') + 'L';
      } else if (num >= 1000) {
        //$(this).text(Math.ceil(num));
        unit = (num / 1000).toFixed(1).replace(/.0$/, '') + 'K';
      }
      $(this).text(unit);
      return num;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div><span class="count">5000000000</span></div>
<div><span class="count">2000</span></div>
<div><span class="count">1000</span></div>

Answer 2

这是因为您要进行计算您使用此行更新文本$(this).text(Math.ceil(num));

似乎您从Stackoverflow获得的代码应该在函数

中

$('.count').each(function() {
  function formatNum(num){
    if (num >= 1000000000) {
      //$(this).text(Math.ceil(num));
      return (num / 1000000000).toFixed(1).replace(/.0$/, '') + 'G';
    }
    if (num >= 1000000) {
      //$(this).text(Math.ceil(num));
      return (num / 1000000).toFixed(1).replace(/.0$/, '') + 'M';
    }
    if (num >= 100000) {
      //$(this).text(Math.ceil(num));
      return (num / 100000).toFixed(1).replace(/.0$/, '') + 'L';
    }
    if (num >= 1000) {
      //$(this).text(Math.ceil(num));
      return (num / 1000).toFixed(1).replace(/.0$/, '') + 'K';
    }
    return num;
  }
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 4000,
    easing: 'swing',
    step: function(num) {
      $(this).text(formatNum(Math.ceil(num)));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div><span class="count">2000</span></div>
<div><span class="count">1000</span></div>

Answer 3

$('.count').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 4000,
    easing: 'swing',
    step: function(num) {
      //$(this).text(Math.ceil(num));
      if (num >= 1000000000) {
         $(this).text((num / 1000000000).toFixed(1).replace(/.0$/, '') + 'G');       
        return (num / 1000000000).toFixed(1).replace(/.0$/, '') + 'G';
      }
      if (num >= 1000000) {
         $(this).text((num / 1000000).toFixed(1).replace(/.0$/, '') + 'M');
        return (num / 1000000).toFixed(1).replace(/.0$/, '') + 'M';
      }
      if (num >= 100000) {
         $(this).text((num / 100000).toFixed(1).replace(/.0$/, '') + 'L');
        return (num / 100000).toFixed(1).replace(/.0$/, '') + 'L';
      }
      if (num >= 1000) {
        $(this).text((num / 1000).toFixed(1).replace(/.0$/, '') + 'K');
        return (num / 1000).toFixed(1).replace(/.0$/, '') + 'K';
      }
      $(this).text(Math.ceil(num));
      return num;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div><span class="count">2000</span></div>
<div><span class="count">1000</span></div>