复制代码 代码如下:[code] <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); loading.interval(); }, addSubDIV: function(){ //用setInterval添加外围框内的div标签实现进度效果 //如果达到外围框的宽度,则重新显示进度 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> [/code]运行演示代码:
JavaScript Data Access Test
.sub-loading {
DISPLAY: inline
}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
推荐阅读
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
解决在自身可以用iframe 也可以在自身使用 <base target = "_self"> 然后 window.close(); 提交到父窗口可以改变target >>>详细阅读
本文标题:JavaScript 进度条实现代码(Firefox等相似浏览器下不支持)
地址:http://www.17bianji.com/kaifa2/JS/28424.html
1/2 1