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插件
Nov 24 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
angularJS深拷贝详解
Mar 23 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
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_MySQL教程-第一天
2007/03/18 PHP
动易数据转成dedecms的php程序
2007/04/07 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
php构造函数的继承方法
2015/02/09 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
php头像上传预览实例代码
2017/05/02 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
JavaScript 程序编码规范
2010/11/23 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
python 文件操作删除某行的实例
2017/09/04 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
年终自我鉴定
2013/10/09 职场文书
劲霸男装广告词
2014/03/21 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
导师工作推荐信
2015/03/27 职场文书
整改通知书格式
2015/04/22 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
建国大业观后感800字
2015/06/01 职场文书
正则表达式拆分url实例代码
2022/02/24 Java/Android