zoukankan      html  css  js  c++  java
  • 实用的页面切换进度条

    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();">
  • 相关阅读:
    PLC衔接新方式UcAsp.Opc
    dev barmanager 中的 add按钮出不来,无法创建菜单的问题解决
    一个或多个页边距被设置到也可打印的页面范围之外,处理方式
    bar设置全背景色
    PHP计算两个字符的相似程度similar_text
    PHP中双冒号::的用法
    百度站内搜索应该注意哪些方面?
    快给你的网站添加微信公众号吧!
    实例讲解网站前台界面开发流程
    百度富文本编辑器UEditor安装配置全过程
  • 原文地址:https://www.cnblogs.com/zhoulin/p/1538630.html
Copyright © 2011-2022 走看看