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 相关文章推荐
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
JQuery 学习笔记 选择器之六
Jul 23 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
jsTree使用记录实例
Dec 01 Javascript
js实现抽奖效果
Mar 27 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
vue抽出组件并传值实例
Jul 31 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开发中的错误收集,不定期更新。
2011/02/03 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
Python通过future处理并发问题
2017/10/17 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
python处理RSTP视频流过程解析
2020/01/11 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
法制宣传标语集锦
2014/06/25 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP