javascript 进度条 实现代码


Posted in Javascript onJuly 30, 2009

首先:建立两个类,一个是用来与资料进行连接(数据层),另一个是用来关联前一个类与页面的(逻辑层)
新建一个JScsrip.js 文件
代码如下:

function setPgb(pgbID, pgbValue,pvalues) 
{ 
if ( pgbValue <= pvalues ) 
{ 
if (lblObj = document.getElementById(pgbID+'_label')) 
{ 
lblObj.innerHTML =Math.ceil((pgbValue/pvalues)*100) + '%'; // change the label value 
} 
if ( pgbObj = document.getElementById(pgbID) ) 
{ 
var divChild = pgbObj.children[0]; 
pgbObj.children[0].style.width = Math.ceil((pgbValue/pvalues)*240);//pgbValue; 
} 
window.status = "数据读取第" + pgbValue+"条,请稍候"; 
} 
if ( pgbValue == pvalues ) 
{ 
window.status = "数据读取已经完成"; 
proBar.style.display="none"; 
Table1.style.display="none"; 
} 
}

建立一个 common.css
代码如下:
.bi-loading-status 
{ 
/**//*position: absolute;*/ 
width: 250px; 
padding: 1px; 
overflow: hidden; 
} 
.bi-loading-status .text{ 
white-space: nowrap; 
overflow: hidden; 
width: 100%; 
text-overflow: ellipsis; 
padding: 1px; 
} 
.bi-loading-status .progress-bar { 
border: 1px solid ThreeDShadow; 
background: window; 
height: 10px; 
width: 100%; 
padding: 1px; 
overflow: hidden; 
} 
.bi-loading-status .progress-bar div { 
background: Highlight; 
overflow: hidden; 
height: 100%; 
filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); 
}

建立一个 progressbar.htm
代码如下:
<body topmargin="0" leftmargin="0"> 
<table width="100%" height="100%" ID="Table1" runat=server> 
<tr> 
<td align="center" valign="middle"> 
<DIV class="bi-loading-status" id="proBar" style=" LEFT: 425px; TOP: 278px" align="left"> 
<DIV class="text" id="pgbMain_label" align="left"></DIV> 
<DIV class="progress-bar" id="pgbMain" align="left"> 
<DIV STYLE="WIDTH:5%"></DIV> 
</DIV> 
</DIV> 
</td> 
</tr> 
</table> 
</body>

建立一个 Default.aspx 文件
前台代码如下:
<head> 
<script language="javascript" src="JScript.js" type="text/javascript"></script> 
</head> 
<body > 
<form id="Form1" method="post" runat="server"> 
<asp:GridView ID="GridView1" runat="server"> 
</asp:GridView> 
</form> 
</body>

后台代码如下:
public partial class _Default : System.Web.UI.Page 
{ 
DataSet ds; 
text ts = new text(); 
int count = 0; 
#region Page_Load 
private void Page_Load(object sender, System.EventArgs e) 
{ 
if (!Page.IsPostBack) 
{ 
ds = Getgridview(); 
count = ds.Tables[0].Rows.Count; 
Response.Write("count=" + count); 
string strFileName = Server.MapPath("progressbar.htm"); 
StreamReader sr = new StreamReader(strFileName, System.Text.Encoding.Default); 
string strHtml = sr.ReadToEnd(); 
Response.Write("<div style='align:center;valign:bottom;'>" + strHtml + "</div>"); 
sr.Close(); 
Response.Flush(); 
Thread thread = new Thread(new ThreadStart(ThreadProc)); 
thread.Start(); 
LoadData(ds); 
// Getgridview(); 
//load数据 
thread.Join(); 
} 
} 
#endregion fixedHeader 
#region Getgridview 
protected DataSet Getgridview() 
{ 
ds = ts.QueryProcS("2009/07", "XXXX");//这个是逻辑层中的一个方法 
return ds; 
} 
#endregion 
#region ThreadProc 
private void ThreadProc() 
{ 
string strScript = "<script>setPgb('pgbMain','{0}','" + count + "');</script>"; 
for (int i = 0; i <= count; i++) 
{ 
System.Threading.Thread.Sleep(80); 
Response.Write(string.Format(strScript, i)); 
Response.Flush(); 
} 
} 
#endregion LoadData 
#region LoadData 
private void LoadData(DataSet dds) 
{ 
for (int m = 0; m < count; m++) 
{ 
for (int i = 0; i < dds.Tables[0].Columns.Count; i++) 
{ 
} 
} 
this.GridView1.DataSource = dds.Tables[0].DefaultView; 
this.GridView1.DataBind(); 
} 
#endregion Web Form Designer generated code 
#region Web Form Designer generated code 
override protected void OnInit(EventArgs e) 
{ 
// 
// CODEGEN: This call is required by the ASP.NET Web Form Designer. 
// 
InitializeComponent(); 
base.OnInit(e); 
} 
/**/ 
/// <summary> 
/// Required method for Designer support - do not modify 
/// the contents of this method with the code editor. 
/// </summary> 
private void InitializeComponent() 
{ 
//this.Load += new System.EventHandler(this.Page_Load); 
} 
#endregion 
}

启动加载页面时如下图所示。
javascript 进度条 实现代码
加载完后会自动显示你要显示的数据。
Javascript 相关文章推荐
基于jQuery的history历史记录插件
Dec 11 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
详解TypeScript的基础类型
Feb 18 Javascript
JS input 数字验证代码
Jul 30 #Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 #Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 #Javascript
javascript EXCEL 操作类代码
Jul 30 #Javascript
JavaScript this 深入理解
Jul 30 #Javascript
Google Map API更新实现用户自定义标注坐标
Jul 29 #Javascript
JavaScript Konami Code 实现代码
Jul 29 #Javascript
You might like
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
vue实现移动端省市区选择
2019/09/27 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python中的is和id用法分析
2015/01/26 Python
python杀死一个线程的方法
2015/09/06 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
大学生个人自我鉴定
2013/12/03 职场文书
决心书标准格式
2014/03/11 职场文书
合同协议书格式
2014/04/18 职场文书
2014年资料员工作总结
2014/11/18 职场文书
纪检监察立案决定书
2015/06/24 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书