JS 实现简单进度条

第一次写博客，有点小鸡动。
因为做了一个导出Excel表格功能，但是现在数据多起来了，后台在从数据库读取出来，写入到Excel表格，这个过程会耗点时间，1W条数据大概要6秒左右吧，也不清楚，我是内网可能还快点。反正就是他们用的人在点了下载之后需要等，所以就加了个进度条，以此填补下他们等待的时候空虚又寂寞的心，忽悠用户一下，哈哈。
度娘上查了很多插件，发现原理也不难，就自己写一个简单版的，在博客里马克一下，以后自己还能用，而且，如果对他人有帮助，那也是极好的。

先是写了两个div，里面一个做动态进度条，外面的做躯壳，代码如下：

<div id="progressShell" style="display: none;z-index:80;" class="shell_css" >
    <div id="barFill" style="display: none;z-index:90;" class="bar_css"></div>
</div>

再是写了些样式，代码如下：

.shell_css{
    height: 40px;
    width: 500px;
    margin-top: -700px;
    margin-left: 30%;
    float:left;
    background-color: white;
    border: 1px solid #666;
    -moz-box-shadow: 2px 2px 10px #666;
    -webkit-box-shadow: 2px 2px 10px #666;
    box-shadow:2px 2px 10px #666;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;

    filter:alpha(opacity=99); /*IE滤镜*/
    position:absolute; 
    z-index:99;
    -moz-opacity:0.99; /*Firefox私有*/
    opacity:0.99;/*其他*/
    overflow: hidden;
}

.bar_css{
    height: 100%;
    width: 0px;
    float:left;
    text-align:center;
    line-height:40px;
    color:white;
    background-color: #0c87ff; 
    filter:alpha(opacity=99); /*IE滤镜*/
    -moz-opacity:0.99; /*Firefox私有*/
    opacity:0.99;/*其他*/
    overflow: hidden;
}

最后js代码画图，搞定：

//画进度条方法
        function draw() {
            i+=1;
            var maskDiv = $("#allMask");
            maskDiv.css("display","block");
            var shellDiv = $("#progressShell");//不变的底框；
            shellDiv.css("display","block");
            var barDiv = $("#barFill");//进度框；
            barDiv.attr("class","bar_css");
            barDiv.css("display","block");
            innerWid += 5;
            barDiv.css({width:innerWid+"px"});
            percent += 1;
            barDiv.html(percent+"%");
            if(i==97){
                clearInterval(res);
            }
        }

 function exportWorkInfoExcel() {
            i = 0;
            innerWid = 0;
            percent = 1;
            res = setInterval(draw, 120);//设置跑完进度时间
            var shellDiv = $("#progressShell");//不变的底框；
            var barDiv = $("#barFill");//进度框；
            var maskDiv = $("#allMask");
            $.ajax({
                type:"POST",
                async: true,
                url:"exportWorkInfoExcel.do",
                dataType:"text",
                success:function(data){
                    if(data != null && data != ""){
                        clearInterval(res);
                        barDiv.css({width:"500px"});
                        barDiv.html("100%");
                        if(time != null){
                            clearTimeout(time);
                            time = null;    
                        }
                        time = setTimeout(function(){
                            shellDiv.css("display","none");
                            barDiv.css("display","none");
                            maskDiv.css("display","none");
                            var da = data;
                            da = "${ctx}/"+da;
                            window.location.href=da;
                        }, 300);
                    }else{
                        alert("网络连接超时，无法操作数据！");
                    }
                },
                error: function(){
                    clearInterval(res);
                    shellDiv.css("display","none");
                    barDiv.css("display","none");
                    maskDiv.css("display","none");
                    alert("网络连接超时，无法操作数据！");
                }
        });
        }

最后的最后，加个蒙板，显得好看点：

<div id="allMask" style="width:100%; height:100%;position:absolute; z-index:70; background:#ffffff;filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5; top:0; left:0; display:none; ">
</div>