Js实现数字千位分隔符,滚动效果

2019-05-22  本文已影响0人  午后三点的阳光

在一个数据展示的页面,达到数字滚动显示的效果。
html结构:

<div id="num_1">0</div>
<div id="num_2" class="num">0</div>
<div id="num_3" class="num">0</div>

js部分:

$(document).ready(function(){
    var num_count_1 = 123456789;
    $('#num_1').text(Math.ceil(num_count_1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','));
    //animate滚动
    var num_count_2 = 2535473;
    var num_count_3 = 37590254;
    $('#num_2').html(num_count_2).hide().fadeIn();
    $('#num_3').html(num_count_3).hide().fadeIn();
    $('.num').each(function () {
        $(this).prop('counter',0).animate({
            counter: $(this).text()
        }, {
            duration: 1500,
            easing: 'swing',
            step: function (now) {
                now = Math.ceil(now);
                now = now.toString();
                now = now.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                $(this).text(now);
            }
        });
    });
});
上一篇 下一篇

猜你喜欢

热点阅读