提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

JS代码 实现 效果 整理 进度条
2023-06-13 09:14:28 时间
第一种方法:
Loading.js
复制代码代码如下:

//频率
varfrequency=50;
//步长
varstep=3;
//背景颜色
varloadingBgcolor="#ffffff";
//宽度
varloadingWidth=354;

/*
*参数说明:
*content：显示内容，可以为空；
*imageURL：将引用JS文件的路径设置即可；
*left：进度条显示位置left
*top：进度条显示位置top
*/
functionLoading(content,imageURL,left,top)
{
imageURL=imageURL+"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;
}
}

functionLoadTable(content,imageURL,left,top)
{
varstrLoading;
strLoading="";
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=\""+loadingBgcolor+"\">";
if(content!="")
{
strLoading+="<tr>";
strLoading+="<tdalign=\"center\">";
strLoading+="<fontsize=\"4\"face=\"CourierNew,Courier,mono\"><strong>"+content+"</strong></font>";
strLoading+="</td>";
strLoading+="</tr>";
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>";

document.getElementById("loading_div").innerHTML=strLoading;
}

使用页:
复制代码代码如下:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>UntitledDocument</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<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>

第二种方法：
JS实现进度显示功能
复制代码代码如下:
progress.js类文件：

$=function(id){
returndocument.getElementById(id);
}
//文本转JSON字符串
String.prototype.toJson=function(){
if(this==){
returnnull;
}
else{
try{
returneval((+this.replace(/rn/g,rn)+));
}
catch(err){
}
}
};
//字符格式化方法
String.prototype.format=function(){
varnewStr=this;
varreg=null;
for(vari=0;i<arguments.length;i++){
reg=RegExp("{"+(i)+"}","gm");
newStr=newStr.replace(reg,arguments[i]);
}
returnnewStr;
};
//进度条类
functionProgress(objId){
//window.setInterval对象
this.interval=null;
//进度条对象ID
this.id=objId;
//当前进度起始进度为0
this.progress=0;
//进度条显示进度的DIVID
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
varprogressdiv=document.createElement(div);
//边框DIV样式
varprogressdiv_css_text=position:absolute;width:{0}px;height:{1}px;left:{2}px;top:{3}px;border:{4}{5}pxsolid;.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(){
varprogressDiv=document.getElementById(this.progressId);
varprogressFrameDiv=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>
varl=0;
varimgs;
varsum=0;
varimgs=newArray();
functionchk(){
l--;
document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%"
if(l==0){
for(vari=0;i<sum;i++)
document.body.innerHTML+="<imgsrc=""+imgs[i].src+"">"
}
}
if(document.images){
imgs[0]=newImage()
imgs[1]=newImage()
imgs[2]=newImage()
imgs[3]=newImage()
imgs[4]=newImage()
imgs[5]=newImage()
imgs[6]=newImage()
imgs[7]=newImage()
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>
<divid="aa">0%</div>
<script>
sum=l=imgs.length;
for(vari=0;i<l;i++){
imgs[i].onload=chk;
imgs[i].onerror=chk;//无论图片是否加载成功，都执行指定方法
}
</script>
</body>

相关文章