js实现加载层

效果如上图，加载层经常用在页面加载时间比较长的地方或者用于美化页面。

示例地址：
http://php.baiwanx.com.cn/gdmzzz201712276570/index.php

具体代码如下：

<div class="guideW">
     <div class="guide">
         <img src="images/guide_logo2.png" />
     </div>

     <div class="data">
        <div class="mid">
            <i class="dd1"></i>
            <i class="dd2"></i>
            <i class="dd3"></i>
            <i class="dd4"></i>
            <i class="dd5"></i>
            <i class="dd0"></i>
            <i class="dd6"></i>
            <i class="dd7"></i>
            <i class="dd8"></i>
            <i class="dd9"></i>
            <i class="dd10"></i>
        </div>
     </div>
</div>

js代码：

var autoTime;
    function addNumber(n){
        clearTimeout(autoTime);
        var t = parseInt($(".data .text").text());
        var j = (parseInt(n)-t)/10;
        for (var i=1;i<11;i++){
        addText(i,Math.ceil(j*i)+t);
    };
    //加载完成
    if(n==100){
        setTimeout(function () {
            $(".guideW").fadeOut(200);
            $(".h_ban .pic").addClass("on")
        },1600);

    };
};
function addText(i,j){
    autoTime=setTimeout(function () {
        $(".data .text").text(j);
    }, i*100);
};

//模拟百分比加载进度
document.onreadystatechange = completeLoading;
function completeLoading() {
    if(document.readyState=="uninitialized"){
        addNumber(10);
    }else if(document.readyState=="loading"){
        addNumber(25);
    }else if(document.readyState=="interactive"){
        addNumber(50);
    }else if(document.readyState=="complete"){
        addNumber(100);
    };
};