JavaScript 进度条实现代码(Firefox等相似浏览器下不支持)_javascript技巧

复制代码 代码如下:

[code]

[/code]
运行演示代码:

<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>