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);
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章