Posted in Javascript onMay 21, 2011
第一种方法:
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>
JS 进度条效果实现代码整理
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@