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


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>
Javascript 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
ES6中Promise的使用方法实例总结
Feb 18 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 Javascript
jquery 使用点滴函数代码
May 20 #Javascript
JQuery对checkbox操作 (循环获取)
May 20 #Javascript
检测jQuery.js是否已加载的判断代码
May 20 #Javascript
JQuery datepicker 使用方法
May 20 #Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 #Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 #Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 #Javascript
You might like
新浪新闻小偷
2006/10/09 PHP
基于mysql的bbs设计(五)
2006/10/09 PHP
php提交post数组参数实例分析
2015/12/17 PHP
PHP如何将XML转成数组
2016/04/04 PHP
PHP的全局错误处理详解
2016/04/25 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
使用python分析git log日志示例
2014/02/27 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
python实现多进程代码示例
2018/10/31 Python
python实现kmp算法的实例代码
2019/04/03 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
小学三年级数学教学反思
2014/01/31 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
Python面向对象编程之类的概念
2021/11/01 Python
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
MySQL读取JSON转换的方式
2022/03/18 MySQL