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 相关文章推荐
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
BootStrap selectpicker
2016/06/20 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
JS常用算法实现代码
2016/11/14 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
python实现网页链接提取的方法分享
2014/02/25 Python
在Python下尝试多线程编程
2015/04/28 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
财务部总监岗位职责
2014/03/12 职场文书
普通话宣传标语
2014/06/26 职场文书
中职招生先进个人材料
2014/08/31 职场文书
读后感作文评语
2014/12/25 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python