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

在一个数据展示的页面,达到数字滚动显示的效果。
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);
            }
        });
    });
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,809评论 1 92
  • 投资与财务自由 什么是消费?什么是资产? 能够为我们“钱生钱”的就是资产。 不能“生钱”的就不是资产。 现金不是资...
    东南有大树阅读 1,703评论 0 11
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,748评论 1 45
  • 浙江一位姓毛的商人在杭州某小区附近开了一家小吃店,刚开始的时候生意还不错。可是这种局面并没有维持多久,就被两家大酒...
    包黑子阅读 283评论 0 0
  • I am tired, I quit, Love hurts us so much, not funny, it'...
    帶風走路deFENG阅读 335评论 0 1