提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

JSLoading功能的简单实现

实现 简单 功能
2023-06-13 09:15:13 时间

我们经常在浏览网页的时候会看到数据在加载时，出现的LOADING提示。其实这个功能原理是很简单的，就是一个DIV遮盖当前页面，然后Loading就在遮盖DIV层上展示出来，现在我们来动手实现一下。

1.当前页面：

复制代码代码如下:

<divclass="current"><ahref="#"onclick="showLoading()">Loading</a></div>

2.遮罩层：
复制代码代码如下:

<divid="over"class="over"></div>

3.Loading展示层：
复制代码代码如下:
<divid="layout"class="layout"><imgsrc="//img.jbzj.com/file_images/article/201311/2013112931.gif"alt=""/></div>

整体代码:
复制代码代码如下:
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <styletype="text/css">
       .currenta{
           font-size:20px;
       }

       .over{
           display:none;
           position:absolute;
           top:0;
           left:0;
           width:100%;
           height:100%;
           background-color:#f5f5f5;
           opacity:0.5;
           z-index:1000;
       }

       .layout{
           display:none;
           position:absolute;
           top:40%;
           left:40%;
           width:20%;
           height:20%;
           z-index:1001;
           text-align:center;
       }
   </style>
   <scripttype="text/javascript">
       functionshowLoading()
       {
           document.getElementById("over").style.display="block";
           document.getElementById("layout").style.display="block";
       }
   </script>
</head>
<body>
   <divclass="current"><ahref="#"onclick="showLoading()">Loading</a></div>
   <divid="over"class="over"></div>
   <divid="layout"class="layout"><imgsrc="//img.jbzj.com/file_images/article/201311/2013112931.gif"alt=""/></div>
</body>
</html>


最终效果：

在网上还看到另外一种实现方式，感觉思路不错，就是利用JS不断的改变html标签的value值，达到加载提示的效果，根据他的思路我自己实现了下，代码如下：

复制代码代码如下:
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <!--<scriptsrc="Scripts/jquery-1.8.2.js"></script>-->
   <styletype="text/css">
       #tb{
           width:100%;
           height:100%;
           line-height:10px;
       }

           #tbtrtd{
               text-align:center;
           }

       .progressbar{
           font-family:Arial;
           font-weight:bolder;
           color:gray;
           background-color:white;
           padding:0px;
           border-style:none;
       }

       .percent{
           font-family:Arial;
           color:gray;
           text-align:center;
           border-width:medium;
           border-style:none;
       }
   </style>
   <scripttype="text/javascript">
       varbar=0;
       varstep="||";
       /*
       *第一种方式即：$(document).ready(function(){.....});
       */
       //$(function(){
       //   progress();
       //});

       /*
       *第二种方式
       */
       //window.onload=function(){
       //   progress();
       //}

       /*
       *第三种方式模拟$(document).ready(function(){.....});
       */
       (function(){
           varie=!!(window.attachEvent&&!window.opera);
           varwk=/webkit\/(\d+)/i.test(navigator.userAgent)&&(RegExp.$1<525);
           varfn=[];
           varrun=function(){for(vari=0;i<fn.length;i++)fn[i]();};
           vard=document;
           d.ready=function(f){
               if(!ie&&!wk&&d.addEventListener)
                   returnd.addEventListener("DOMContentLoaded",f,false);
               if(fn.push(f)>1)return;
               if(ie)
                   (function(){
                       try{d.documentElement.doScroll("left");run();}
                       catch(err){setTimeout(arguments.callee,0);}
                   })();
               elseif(wk)
                   vart=setInterval(function(){
                       if(/^(loaded|complete)$/.test(d.readyState))
                           clearInterval(t),run();
                   },0);
           };
       })();

       document.ready(function(){

           progress();

       });


       functionprogress(){
           bar=bar+2;
           step=step+"||";
           document.getElementById("percent").value=bar+"%";
           document.getElementById("progressbar").value=step;
           if(bar<=98){
               setTimeout("progress()",100);
           }
       }
   </script>
</head>
<body>
   <tableid="tb">
       <tr>
           <td>
               <inputtype="text"size="50"class="percent"id="percent"/></td>
       </tr>
       <tr>
           <td>
               <inputtype="text"size="50"class="progressbar"id="progressbar"/></td>
       </tr>
   </table>
</body>
</html>


最终效果：

相关文章