近期在做一個網站的查詢功能，但是由於資料量確實太大，分頁查詢後也是很慢，同時查詢出的資料部分還要進行一些處理，導致使用者說要我們給他們加一個查詢進度，要百分比顯示。加上載入動畫很簡單，layui有現成的。但是還要動畫。。我tm（手動微笑），原諒我水平比較低。然後就瞎搞，終於搞出了一個載入的進度，雖然還是假的。。。

上面廢話有點多，直接切入正題。

首先是html程式碼。。。。。（不存在的2333333........） 

然後是js程式碼：

    //這裡是必須要有的，_index的作用是用來關閉遮罩，詳細看layui的文件
    var _index;
    var _lp_baseTime = 0;
    var _lp_startTime = 0;
    function updateLoadProgress() {
        if (_lp_baseTime < 0) {
            layer.close(_index);
            return;
        }
        var dval = parseInt(new Date().valueOf())- parseInt(_lp_startTime);
        var timeDifference = (dval / _lp_baseTime).toFixed(2);
        var lp = timeDifference < 1 ? timeDifference * 100 : 99;
        $("#loadProgress").html(parseInt(lp));
        setTimeout(function () { updateLoadProgress(); return; }, 650);
    }


    function 你的函式(){
    
    $.ajax({
        url:url,
        async:true,
        data:{},
        beforeSend：function(){
            //敲黑板
            _index = layer.load(1, {
                    content: "<div style='margin-left:-23px;padding-top:44px;width:120px;color:#FFF;'>正在查詢(<span id='loadProgress' >0</span>%)</div>",
                    shade: [0.5, '#000']
                });
            //這裡是預估的時間，因為整個進度都是根據消耗時間計算的 = =
            _lp_baseTime = Math.abs(new Date(end).valueOf() - new Date(start).valueOf()) / 3600000 * stns.split(',').length * 150;
            _lp_startTime = new Date().valueOf();

           setTimeout(function () { updateLoadProgress(); return; }, 60);
        },
        success:function(){ _lp_baseTime = -1; $("#loadProgress").html("100");layer.close(_index); },
        error:function(){
                _lp_baseTime = -1;
                layer.close(_index);
            }
    });

    }
 

OK，就是這麼多，主要是利用預估的時間與現在已進行時間進行預估做比較，所以實際使用的時候還要進行一定程度的調整，但是，最起碼也是個思路是不是233333，參考一下吧

超過時間時進度會定格在99%，所以，emmmm....注意預留一些時間