美文网首页
Js实现数字千位分隔符,滚动效果

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

作者: 午后三点的阳光 | 来源:发表于2019-05-22 06:41 被阅读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);
            }
        });
    });
});

相关文章

网友评论

      本文标题:Js实现数字千位分隔符,滚动效果

      本文链接:https://www.haomeiwen.com/subject/jjvezqtx.html