我们经常在浏览网页的时候会看到数据在加载时，出现的LOADING提示。其实这个功能原理是很简单的，就是一个DIV遮盖当前页面，然后Loading就在遮盖DIV层上展示出来，现在我们来动手实现一下。
1.当前页面：
<div class="current"><a href="#" onclick="showLoading()">Loading</a></div>
2.遮罩层：
<div id="over" class="over"></div>
3.Loading展示层：
<div id="layout" class="layout"><img src="http://images.cnblogs.com/cnblogs_com/qiuyan/477435/o_31.gif" /></div>
整体代码:
View Code
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 .current a { 7 font-size: 20px; 8 } 9 10 .over { 11 display: none; 12 position: absolute; 13 top: 0; 14 left: 0; 15 100%; 16 height: 100%; 17 background-color: #f5f5f5; 18 opacity:0.5; 19 z-index: 1000; 20 } 21 22 .layout { 23 display: none; 24 position: absolute; 25 top: 40%; 26 left: 40%; 27 20%; 28 height: 20%; 29 z-index: 1001; 30 text-align:center; 31 } 32 </style> 33 <script type="text/javascript"> 34 function showLoading() 35 { 36 document.getElementById("over").style.display = "block"; 37 document.getElementById("layout").style.display = "block"; 38 } 39 </script> 40 </head> 41 <body> 42 <div class="current"><a href="#" onclick="showLoading()">Loading</a></div> 43 <div id="over" class="over"></div> 44 <div id="layout" class="layout"><img src="http://images.cnblogs.com/cnblogs_com/qiuyan/477435/o_31.gif" /></div> 45 </body> 46 </html>
最终效果：
在网上还看到另外一种实现方式，感觉思路不错，就是利用JS不断的改变html标签的value值，达到加载提示的效果，根据他的思路我自己实现了下，代码如下：
View Code
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <!-- <script src="Scripts/jquery-1.8.2.js"></script>--> 6 <style type="text/css"> 7 #tb { 8 100%; 9 height: 100%; 10 line-height: 10px; 11 } 12 13 #tb tr td { 14 text-align: center; 15 } 16 17 .progressbar { 18 font-family: Arial; 19 font-weight: bolder; 20 color: gray; 21 background-color: white; 22 padding: 0px; 23 border-style: none; 24 } 25 26 .percent { 27 font-family: Arial; 28 color: gray; 29 text-align: center; 30 border- medium; 31 border-style: none; 32 } 33 </style> 34 <script type="text/javascript"> 35 var bar = 0; 36 var step = "||"; 37 /* 38 *第一种方式即 ：$(document).ready(function(){.....}); 39 */ 40 //$(function () { 41 // progress(); 42 //}); 43 44 /* 45 *第二种方式 46 */ 47 //window.onload = function () { 48 // progress(); 49 //} 50 51 /* 52 *第三种方式模拟 $(document).ready(function(){.....}); 53 */ 54 (function () { 55 var ie = !!(window.attachEvent && !window.opera); 56 var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525); 57 var fn = []; 58 var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); }; 59 var d = document; 60 d.ready = function (f) { 61 if (!ie && !wk && d.addEventListener) 62 return d.addEventListener('DOMContentLoaded', f, false); 63 if (fn.push(f) > 1) return; 64 if (ie) 65 (function () { 66 try { d.documentElement.doScroll('left'); run(); } 67 catch (err) { setTimeout(arguments.callee, 0); } 68 })(); 69 else if (wk) 70 var t = setInterval(function () { 71 if (/^(loaded|complete)$/.test(d.readyState)) 72 clearInterval(t), run(); 73 }, 0); 74 }; 75 })(); 76 77 document.ready(function () { 78 79 progress(); 80 81 }); 82 83 84 function progress() { 85 bar = bar + 2; 86 step = step + "||"; 87 document.getElementById("percent").value = bar + "%"; 88 document.getElementById("progressbar").value = step; 89 if (bar <= 98) { 90 setTimeout("progress()", 100); 91 } 92 } 93 </script> 94 </head> 95 <body> 96 <table id="tb"> 97 <tr> 98 <td> 99 <input type="text" size="50" class="percent" id="percent" /></td> 100 </tr> 101 <tr> 102 <td> 103 <input type="text" size="50" class="progressbar" id="progressbar" /></td> 104 </tr> 105 </table> 106 </body> 107 </html>
最终效果：
