Question

我正在尝试为使用跟随计数器功能的大数字添加逗号（千位分隔符）：

<script type='text/javascript'>
    $(window).load(function() {
        $('.Count').each(function() {
            var $this = $(this);
            jQuery({Counter: 0}).animate({Counter: $this.text()}, {
                duration: 1500,
                easing: 'swing',
                step: function() {
                    $this.text(Math.ceil(this.Counter));
                }
            });
        });
    });

我是否修改了这个特定的公式，还是必须编写一个能够处理格式化的附加函数？

Answer 1

我有同样的问题，大数字不一致地结束（即550,000有时只计算到549,826左右）。

这是一个简化的解决方案，toLocaleString函数相应地添加小数：

$('.js-count').each(function() {
   
   $(this).prop('Counter', 0).animate({
      
      Counter: $(this).data('number')
   }, {
      
      duration: 4000,
      easing: 'swing',
      step: function(now) {
         
         $(this).text(Math.ceil(now).toLocaleString('en'));
      }
   });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="js-count" data-number="550000"></span>

我还选择使用数据属性来存储号码。这种方式更具防弹性。如果事件不止一次发生，依赖元素的内容可能会导致错误计算。

Answer 2

这可能有效

<script>
$(window).load(function() {
    $('.Count').each(function() {
        var $this = $(this);
        jQuery({Counter: 0}).animate({Counter: $this.text()}, {
            duration: 1500,
            easing: 'swing',
            step: function() {
                var num = Math.ceil(this.Counter).toString();
                if(Number(num) > 999){
                    while (/(\d+)(\d{3})/.test(num)) {
                        num = num.replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
                    }
                }
                $this.text(num);
            }
        });
    });
});
</script>

将千位分隔符添加到jQuery Counter

2 个答案: