<div class="codetitle"> <span><a style="CURSOR: pointer" data="37474" class="copybut" id="copybut37474" onclick="doCopy('code37474')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code37474"> <br>[code] <br><script type="text/javascript"> <BR>var loading = { <BR>element: null, <BR>count: 0, <BR>ID: 0, <BR>createLoading: function(parent, width, height){ //用于生成外围的进度条框 <BR>loading.element = document.createElement("div"); <BR>loading.element.id = "loading"; <BR>loading.element.className = "loading"; <BR>loading.element.style.height = height; <BR>loading.element.style.backgroundColor = "#ffffff"; <BR>loading.element.style.border = "1px solid #333333"; <BR>loading.element.style.width = width; <BR>parent.appendChild(loading.element); <BR>loading.interval(); <BR>}, <BR>addSubDIV: function(){ //用setInterval添加外围框内的div标签实现进度效果 <BR>//如果达到外围框的宽度，则重新显示进度 <BR>if ((loading.count + 1) * 2 >= parseInt(loading.element.style.width)) { <BR>loading.count = 0; <BR>clearInterval(loading.ID); <BR>loading.element.innerHTML = ""; <BR>loading.interval(); <BR>} <BR>else { <BR>var elem = document.createElement("div"); <BR>elem.className= sub-loading ; <BR>elem.style.backgroundColor = "#f00"; <BR>elem.style.width = "2px"; <BR>elem.style.height = loading.element.style.height; <BR>elem.style.display="inline"; <BR>loading.element.appendChild(elem); <BR>loading.count++; <BR>} <BR>}, <BR>interval: function(){ //反复调用 <BR>loading.ID = setInterval(loading.addSubDIV, 30); <BR>} <BR>} <BR>onload = function(){ <BR>loading.createLoading(document.getElementById("parent"), "402px", "15px"); <BR>} <BR></script> <br> </div> <br>[/code]<br>运行演示代码:<br><div class="htmlarea"> <textarea id="runcode45760"> <title>JavaScript Data Access Test</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script type="text/javascript"> var loading = { element: null, count: 0, ID: 0, createLoading: function(parent, width, height){ loading.element = document.createElement("div"); loading.element.id = "loading"; loading.element.className = "loading"; loading.element.style.height = height; loading.element.style.backgroundColor = "#ffffff"; loading.element.style.border = "1px solid #333333"; loading.element.style.width = width; parent.appendChild(loading.element); //code from jb51.net loading.interval(); }, addSubDIV: function(){ if ((loading.count + 1) * 2 >= parseInt(loading.element.style.width)) { loading.count = 0; clearInterval(loading.ID); loading.element.innerHTML = ""; loading.interval(); } else { var elem = document.createElement("div"); elem.className='sub-loading'; elem.style.backgroundColor = "#f00"; elem.style.width = "2px"; elem.style.height = loading.element.style.height; elem.style.display="inline"; loading.element.appendChild(elem); loading.count++; } }, interval: function(){ loading.ID = setInterval(loading.addSubDIV, 30); } } onload = function(){ loading.createLoading(document.getElementById("parent"), "402px", "15px"); } </script> <style>.sub-loading { DISPLAY: inline } </style> <meta content="MSHTML 6.00.6000.16850" name="GENERATOR"> <div id="parent"></div> </textarea><br><input onclick="runEx('runcode45760')" type="button" value="杩"> </div>
