欢迎来到天天文库
浏览记录
ID：6632747
大小：62.50 KB
页数：8页
时间：2018-01-20
《js 进度条效果实现代码整理》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。
1、JS进度条效果实现代码整理第一种方法:Loading.js复制代码代码如下://频率varfrequency=50;//步长varstep=3;//背景颜色varloadingBgcolor=“#ffffff”;//宽度varloadingWidth=354;/**参数说明:*content：显示内容，可以为空；*imageURL：将引用JS文件的路径设置即可；*left：进度条显示位置left*top：进度条显示位置top*/functionLoading(content,imageURL,left,top){imageURL=imageUR
2、L+“Loading.jpg”;LoadTable(content,imageURL,left,top);showimage.style.display=““;window.setInterval(“RefAct();”,frequency);}functionRefAct(){imgAct.width+=step;if(imgAct.width>loadingWidth-4){imgAct.width=0;}-8-}functionLoadTable(content,imageURL,left,top){varstrLoading;st
3、rLoading=““;strLoading+=“<divid=”showimage”style=”DISPLAY:none;Z-INDEX:100;LEFT:”+left+“px;POSITION:absolute;TOP:”+top+“px;”align=”center”>”;strLoading+=“<TABLEid=”Table1”cellSpacing=”0”cellPadding=”0”width=”“+loadingWidth+“”border=”0”bgcolor=”“+loa
4、dingBgcolor+“”>”;if(content!=““){strLoading+=“<tr>”;strLoading+=“<tdalign=”center”>”;strLoading+=“<fontsize=”4”face=”CourierNew,Courier,mono”><strong>”+content+“</strong></font>”;strLoading+=“</td>”;strLoading+=“</tr>
5、”;strLoading+=“<TR>”;}strLoading+=“<TDclass=”Loading”height=”8”>”;strLoading+=“<IMGid=”imgAct”height=”8”alt=””src=”“+imageURL+“”width=”0”>”;strLoading+=“</TD>”;strLoading+=“</TR>”;strLoading+=“</TABLE>”;strLoading+=“</div&
6、gt;”;document.getElementById(“loading_div”).innerHTML=strLoading;}使用页:复制代码代码如下:<!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.01Transitional//EN”>-8-<html><head><title>UntitledDocument</title><metahttp-equiv=“Content-Type”content=“text/html;charset=gb2
7、312”><scriptsrc=“LoadingJS/Loading.js”type=“text/javascript”></script></head><body><inputtype=“button”name=“Button”value=“Button”onclick=“Loading(‘显示标签内容’,‘LoadingJS/’,20,100)”><divid=“loading_div”></div></body></html>
8、第二种方法：JS实现进度显示功能复制代码代码如下:progress.js类文件：$=function(id){returndocument.getEl
此文档下载收益归作者所有
