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 相关文章推荐
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 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
利用 window_onload 实现select默认选择
2006/10/09 PHP
php公用函数列表[正则]
2007/02/22 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
node实现登录图片验证码的示例代码
2018/04/20 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
jQuery实现增删改查
2020/12/22 jQuery
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
python中去空格函数的用法
2014/08/21 Python
Python中表示字符串的三种方法
2017/09/06 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
在Python中增加和插入元素的示例
2018/11/01 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
python实现桌面壁纸切换功能
2019/01/21 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
python爬取招聘要求等信息实例
2020/11/20 Python
Python 随机按键模拟2小时
2020/12/30 Python
毕业生在校学习的自我评价分享
2013/10/08 职场文书
公司周年庆活动方案
2014/08/25 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
校园歌手大赛主持词
2015/07/03 职场文书