javascript progress bar implementation code_javascript skills-JS Tutorial-php.cn

First: Create two classes, one is used to connect with data (data layer), and the other is used to associate the previous class with the page (logic layer)
Create a new JScsrip.js file
The code is as follows :

Copy code The code is as follows:

 
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 = "Data reading number" pgbValue "Bar, please wait"; 
} 
if ( pgbValue == pvalues ​​) 
{ 
window.status = "Data reading has been completed"; 
proBar.style.display ="none"; 
Table1.style.display="none"; 
} 
} 

Create a common.css
The code is as follows:

Copy code The code is as follows:

 
.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); 
} 

Create a progressbar.htm
The code is as follows:

Copy code The code is as follows:

< /table>

Create a Default.aspx file
The frontend code is as follows:

Copy code The code is as follows:

< ;asp:GridView ID="GridView1" runat="server">

The background code is as follows:

Copy code The code is as follows:

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(""   strHtml   "
"); 
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); 
} 
/**/ 
///  
/// Required method for Designer support - do not modify 
/// the contents of this method with the code editor. 
/// 
private void InitializeComponent() 
{ 
//this.Load  = new System.EventHandler(this.Page_Load); 
} 
#endregion 
} 

启动加载页面时如下图所示。

加载完后会自动显示你要显示的数据。

Related labels：

javascript progress bar

source：php.cn

Previous article：Javascript this pointer_javascript skills Next article：JQuery table operations (alternative display, dragging table rows, selecting rows, etc.)_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn