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加ASP二级域名转向的代码
May 17 Javascript
csdn 博客的css样式 v3
Feb 24 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 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
天津市收音机工业发展史
2021/03/04 无线电
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
一个对于js this关键字的问题
2007/01/09 Javascript
Prototype Function对象 学习
2009/07/12 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
vue cli 全面解析
2018/02/28 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
全球虚拟主机商:HostGator
2017/02/06 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
现金会计岗位职责
2013/12/05 职场文书
访谈节目策划方案
2014/05/15 职场文书
五水共治一句话承诺
2014/05/30 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
导游词开场白
2015/01/31 职场文书
明确岗位职责
2015/02/14 职场文书
个人维稳承诺书
2015/05/04 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
Python连续赋值需要注意的一些问题
2021/06/03 Python
python区块链持久化和命令行接口实现简版
2022/05/25 Python