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>