实用的页面切换进度条

JS文件内容：

 document.write( " <div id='divprogress' align='center' style='position: absolute; top: 300px; left: 100px;z-index: 900; display: none;'> " );
 document.write( " <center> " );
 document.write( "    <div align='center'> " );
 document.write( "        <div id='sb' style='border-right: #ffffff 1px solid; border-top: #ffffff 1px solid;background: #aaccff; width: 400px; border-bottom: #cccccc 1px solid; height: 14px;text-align: left'> " );
 document.write( "            <div id='sbChild1' style='filter: Alpha(Opacity=0, FinishOpacity=80, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);overflow: hidden; width: 100%; position: absolute; height: 12px'> " );
 document.write( "                <div style='background: #000000; width: 100%; height: 12px; overflow: hidden'> " );
 document.write( "                </div> " );
 document.write( "            </div> " );
 document.write( "            <div style='font-size: 10px; width: 400px; color: white; font-family: arial; position: absolute;height: 14px; text-align: center'> " );
 document.write( "            </div> " );
 document.write( "        </div> " );
 document.write( "        <p></p> " );
 document.write( "        <!-- 间距 --> " );
 document.write( "        <div id='infor' style='font-size: 11px; width: 100%; color: #999999; font-family: arial;position: relative; height: 14px; text-align: center'> " );
 document.write( "        </div> " );
 document.write( "    </div> " );
 document.write( " </center> " );
 document.write( " </div> " );
 document.write( " <div id='webBgLayerFG' style='position: absolute; top: 0px; left: 0px; z-index: 899;background-color: #ccc; height: 100%; width: 100%; display: none; -moz-opacity: 0.5;filter: alpha(opacity=60);'> " );
 document.write( " </div> " );
 
 
  var  ie5  =  (document.all  &&  document.getElementsByTagName);
  var  step  =   0 ;
 
  function  setSB(v, el, inforEl, message)  {
     if (ie5 || document.readyState == "complete") {
         filterEl = el.children[0];
        valueEl = el.children[1];
        if (filterEl.style.pixelWidth > 0) {
            var filterBackup = filterEl.style.filter;
            filterEl.style.filter = "";
            filterEl.style.filter = filterBackup;
        }

        filterEl.style.width = v + "%";
        valueEl.innerText = v + "%";
        inforEl.innerText = message;
    }
}


function  setSBByStep(v, el, inforEl, message)  {
    if (ie5 || document.readyState == "complete") {
        step = step + v;
        filterEl = el.children[0];
        valueEl = el.children[1];

        if (filterEl.style.pixelWidth > 0) {
            var filterBackup = filterEl.style.filter;
            filterEl.style.filter = "";
            filterEl.style.filter = filterBackup;
        }

        filterEl.style.width = step + "%";
        valueEl.innerText = step + "%"
        inforEl.innerText = message;
    }
}

function  fakeProgress(v, el)  {
    if (v >= 99) {
//        divprogress.style.display = "none";
//        //location.href = "#"; //跳转路径
        
        document.getElementById("divprogress").style.display="none";
        document.getElementById("webBgLayerFG").style.display="none";
    }
    else {
        divprogress.style.display = "block";
        setSB(v, el, infor, " 数据处理中……");
        var itime = 10;
        if (v > 90)
            itime = 100;
        else if (v > 70)
            itime = 25;
        else if (v > 50)
            itime = 10;
        window.setTimeout("fakeProgress(" + (v + 1) + ", document.all['" + el.id + "'])", itime);
    }
}
　
function  showProgress()  {
    var ShopConfirmLayer = document.getElementById("divprogress");
    var webBgLayerFG = document.getElementById("webBgLayerFG");
    ShopConfirmLayer.style.display = "";
    ShopConfirmLayer.style.left = parseInt((document.documentElement.scrollWidth - ShopConfirmLayer.offsetWidth) / 2) + document.documentElement.scrollLeft + "px";
    ShopConfirmLayer.style.top = Math.abs(parseInt((document.documentElement.clientHeight - ShopConfirmLayer.offsetHeight) / 2)) + document.documentElement.scrollTop + "px";
    webBgLayerFG.style.display = "";
    webBgLayerFG.style.height = document.documentElement.clientHeight + "px";
    webBgLayerFG.style.width = document.documentElement.clientWidth + "px";
    fakeProgress(0, sb);
    //loading(0,sb);
}

切换页面时 需要使用到进度条的页面：
1.HEAD导入JS文件
2.BODY追加事件 <body οnbefοreunlοad="showProgress();">

转载于:https://www.cnblogs.com/zhoulin/archive/2009/08/04/1538630.html