作家
登录

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

作者: 来源:www.28hudong.com 2013-03-30 02:28:36 阅读 我要评论

复制代码 代码如下:[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

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)