• 实用的页面切换进度条


    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;  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;  100%; position: absolute; height: 12px'>");
     document.write(
    "               <div style='background: #000000;  100%; height: 12px; overflow: hidden'>");
     document.write(
    "               </div>");
     document.write(
    "           </div>");
     document.write(
    "           <div style='font-size: 10px;  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;  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%;  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 onbeforeunload="showProgress();">
  • 相关阅读:
    hping3 DDOS泛洪攻击
    如何利用kali破解密码
    python 字典数据类型day05
    Cisco Packet Tracer思科模拟器汉化本
    菜鸟入坑pythonday04列表
    python菜鸟入坑day02
    python运行的第一个脚本菜鸟篇
    python整个安装过程+环境变量
    菜鸟入坑python第一节
    01、python基础知识
  • 原文地址:https://www.cnblogs.com/zhoulin/p/1538630.html
Copyright © 2020-2023  润新知