JS --- 动态显示目标数字(排名,金额等数字动态化显示可适用)

效果预览:
这里写图片描述

js部分:

$(function(){

    //最终需要显示的数字
    var count = 10000000;
    //获取数字的长度
    var countLen = count.toString().length

    //根据数字长度设置对应的初始值
    switch(countLen)
    {
    case countLen < 3:
      i = count;
      break;
    case countLen < 4:
      i = count*0.1;
      break;
    case countLen < 5:
      i = count*0.9;
      break;   
    default:
      i = count*0.99;
    }

    //使用嵌套计时器加快到达目标数字的速度
    var countTimes = setInterval(function(){
        //若想让数字速度慢一些 可以调整计时器间隔数值 或者 直接将第一层计时器去除 效果更明显
        var countTime = setInterval(function(){
            i++;
            //在页面建立一个元素class名取为rankingCount即可显示效果
            $('.rankingCount').text(parseInt(i));
            if (i >= count) {
                i = count-1;
                clearInterval(countTime);
                clearInterval(countTimes);
            }
        },1);
    },1);
});

猜你喜欢

转载自blog.csdn.net/sinat_19327991/article/details/79299827