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滚动条回到顶部的代码
Dec 06 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
express.js中间件说明详解
2019/03/19 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
python自动裁剪图像代码分享
2017/11/25 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
python super用法及原理详解
2020/01/20 Python
如何写python的配置文件
2020/06/07 Python
python中数字是否为可变类型
2020/07/08 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
阿波罗盒子:Apollo Box
2017/08/14 全球购物
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
食品安全工作方案
2014/05/07 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
检讨书范文1000字
2015/01/28 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js