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 相关文章推荐
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
js图片自动切换效果处理代码
May 07 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
浅析Jquery操作select
Dec 13 Javascript
angular实现商品筛选功能
Feb 01 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
js中关于String对象的replace使用详解
2011/05/24 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
python进阶教程之异常处理
2014/08/30 Python
Python NumPy库安装使用笔记
2015/05/18 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Python实现的双色球生成功能示例
2017/12/18 Python
Python读取word文本操作详解
2018/01/22 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
在python image 中实现安装中文字体
2020/05/16 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
园林资料员岗位职责
2013/12/30 职场文书
教学器材管理制度
2014/01/26 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python