JS 进度条效果实现代码整理

第一种方法:Loading.js 复制代码代码如下: //频率 var frequency = 50; //步长 var step = 3; //背景颜色 var loadingBgcolor = "#ffffff"; //宽度 var loadingWidth = 354; /* *参数说明: *content：显示内容，可以为空； *imageURL：将引用JS文件的路径设置即可； *left：进度条显示位置left *top：进度条显示位置top */ function Loading(content, imageURL, left, top) { imageURL = imageURL + "Loading.jpg"; LoadTable(content, imageURL, left, top); showimage.style.display=""; window.setInterval("RefAct();", frequency); } function RefAct() { imgAct.width += step; if(imgAct.width > loadingWidth-4) { imgAct.width = 0; } } function LoadTable(content, imageURL, left, top) { var strLoading; strLoading = ""; strLoading += "<div id="showimage" style="DISPLAY:none;Z-INDEX:100;LEFT:" + left+ "px;POSITION:absolute;TOP:" + top+ "px;" align="center">"; strLoading += "<TABLE id="Table1" cellSpacing="0" cellPadding="0" width="" + loadingWidth + "" border="0" bgcolor="" + loadingBgcolor+ "">"; if(content != "") { strLoading += "<tr>"; strLoading += "<td align="center">"; strLoading += "<font size="4" face="Courier New, Courier, mono"><strong>" + content + "</strong></font>"; strLoading += "</td>"; strLoading += "</tr>"; strLoading += "<TR>"; } strLoading += "<TD class="Loading" height="8">"; strLoading += "<IMG id="imgAct" height="8" alt="" src="" + imageURL + "" width="0">"; strLoading += "</TD>"; strLoading += "</TR>"; strLoading += "</TABLE>"; strLoading += "</div>"; document.getElementById("loading_div").innerHTML = strLoading; } 使用页: 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script src="LoadingJS/Loading.js" type="text/javascript"></script> </head> <body> <input type="button" name="Button" value="Button" onclick="Loading('显示标签内容', 'LoadingJS/', 20, 100)"> <div id="loading_div" ></div> </body> </html> 第二种方法：JS实现进度显示功能复制代码代码如下: progress.js类文件： $ = function (id) { return document.getElementById(id); } //文本转JSON字符串 String.prototype.toJson = function () { if (this == ) { return null; } else { try { return eval(( + this.replace(/rn/g, rn) + )); } catch (err) { } } }; //字符格式化方法 String.prototype.format = function () { var newStr = this; var reg = null; for (var i = 0; i < arguments.length; i++) { reg = RegExp('{' + (i) + '}', 'gm'); newStr = newStr.replace(reg, arguments[i]); } return newStr; }; //进度条类 function Progress(objId) { //window.setInterval对象 this.interval = null; //进度条对象ID this.id = objId; //当前进度起始进度为0 this.progress = 0; //进度条显示进度的DIV ID this.progressId = inner + this.id; //进度条边框ID this.progressFrameId = frame + this.id; //进度条类参数配置 this.config = { //宽度 width: 150, //高度 height: 20, //左边距 left: 0, //顶部边距 top: 0, //进度颜色 progressColor: red, //边框颜色 borderColor: #ccc, //边框宽度 borderHeight: 2, //进度完成后间隔N秒后隐藏进度条 0为立即隐藏 hiddenSplit:2000 }; } //进度条类初始化方法 Progress.prototype.init = function () { //新建进度条边框DIV var progressdiv = document.createElement(div); //边框DIV样式 var progressdiv_css_text = position:absolute;width:{0}px;height:{1}px;left:{2}px;top:{3}px;border:{4} {5}px solid;.format ( this.config.width, this.config.height, this.config.left, this.config.top, this.config.borderColor, this.config.borderHeight ); //重置进度为0 this.progress = 0; //设置边框ID progressdiv.id = this.progressFrameId; //设置边框样式 progressdiv.style.cssText = progressdiv_css_text; //设置进度条HTML progressdiv.innerHTML = ' '.format(this.progressId, this.config.height, this.config.progressColor); //加入body中 document.body.appendChild(progressdiv); }; //进度条隐藏函数 Progress.prototype.hiddenProgress = function () { document.body.removeChild(document.getElementById(this.progressFrameId)); window.clearInterval(this.interval); } //进度结束时触发的函数 Progress.prototype.complete = function () { window.clearInterval(this.interval); this.interval = window.setTimeout(this.id+.hiddenProgress();,this.config.hiddenSplit); if (this.completeCallBack) { this.completeCallBack(); } } //进度每次运行后的回调函数 Progress.prototype.callback = function () { var progressDiv = document.getElementById(this.progressId); var progressFrameDiv = document.getElementById(this.progressFrameId); progressDiv.innerHTML = (this.progress*100)+ %; progressFrameDiv.title = 上传进度: + (this.progress*100) + %; progressDiv.style.width = (this.progress*100) + %; if (this.progress >= 1) { this.complete(); progressDiv.innerHTML = 文件上传成功!; } } //进度条运行函数。需要用户自己实现 Progress.prototype.run = function () { alert(请实现 + this.id + .run方法以实现异步进度请求，回发回请调回调 + this.id + .callback方法。); window.clearInterval(this.interval); } //启动进度 Progress.prototype.start = function () { this.init(); this.interval = window.setInterval(this.id + .run(), 1000); } 图片加载进度实时显示复制代码代码如下: <script> var l=0; var imgs; var sum=0; var imgs=new Array(); function chk(){ l--; document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%" if (l==0){ for (var i=0;i<sum;i++) document.body.innerHTML+="<img src='"+imgs[i].src+"'>" } } if (document.images){ imgs[0]=new Image() imgs[1]=new Image() imgs[2]=new Image() imgs[3]=new Image() imgs[4]=new Image() imgs[5]=new Image() imgs[6]=new Image() imgs[7]=new Image() imgs[0].src="/articleimg/2006/08/3859/01.jpg"; imgs[1].src="/articleimg/2006/08/3859/02.jpg"; imgs[2].src="/articleimg/2006/08/3859/03.jpg"; imgs[3].src="/articleimg/2006/08/3859/04.jpg"; imgs[4].src="/articleimg/2006/08/3859/05.jpg"; imgs[5].src="/articleimg/2006/08/3859/06.jpg"; imgs[6].src="/articleimg/2006/08/3859/07.jpg"; imgs[7].src="/articleimg/2006/08/3859/08.jpg"; } </script> <body> <div id="aa">0%</div> <script> sum=l=imgs.length; for (var i=0;i<l;i++){ imgs[i].onload=chk; imgs[i].onerror=chk;//无论图片是否加载成功，都执行指定方法 } </script> </body>

　　推荐阅读

　　基于jquery的button默认enter事件(回车事件)。

在这里特此声明，代码是通过jquery完成。实列代码我亲自写的，完全可以实现，只要复制过去就可以用，但是必须导入jquery包。着个方法支持ie与火狐，绝对好使。我在做的时候在网上找了一些代码，基本全不支持火狐。>>>详细阅读

本文标题：JS 进度条效果实现代码整理

地址：http://www.17bianji.com/kaifa2/JS/24584.html

1/2 1