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上找到的链接 Found link on stack，我曾经尝试过

$('.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>

动态添加单位以进行计数（K，L，M）

3 个答案: