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 一段左右两边随屏滚动的代码
Jun 18 Javascript
Javascript调用C#代码
Jan 17 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
AngularJS指令用法详解
Nov 02 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
js仿淘宝放大镜效果
Dec 28 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
PHP5 面向对象(学习记录)
2009/12/02 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
JS实现吸顶特效
2020/01/08 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python Tkinter GUI编程入门介绍
2015/03/10 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
简单讲解Python中的闭包
2015/08/11 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python requests证书问题解决
2019/09/05 Python
python构建指数平滑预测模型示例
2019/11/21 Python
详解pandas赋值失败问题解决
2020/11/29 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
学习心理学的体会
2014/11/07 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
OpenCV-Python实现轮廓拟合
2021/06/08 Python