Home > Web Front-end > JS Tutorial > javascript progress bar implementation code_javascript skills

javascript progress bar implementation code_javascript skills

WBOY
Release: 2016-05-16 18:48:58
Original
1312 people have browsed it

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:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template