JavaScript プログレスバーの実装 code_javascript スキル

最初: 2 つのクラスを作成します。1 つはデータとの接続に使用され (データ層)、もう 1 つは前のクラスをページに関連付けるために使用されます (ロジック層)。
新しい JScsrip.js ファイルを作成します
コード

コードをコピー コードは次のとおりです:

function setPgb(pgbID, pgbValue,pvalues)
{
if ( pgbValue {
if (lblObj = document.getElementById(pgbID '_label'))
{
lblObj .innerHTML =Math.ceil(( pgbValue/pvalues)*100) '%'; // ラベル値を変更します
}
if ( pgbObj = document.getElementById(pgbID) )
{
var divChild = pgbObj.children[0 ];
pgbObj.children[0].style.width = Math.ceil((pgbValue/pvalues)*240);//pgbValue; status = "データ読み取り番号" pgbValue "バー、お待ちください";
}
if ( pgbValue == pvalues )
{
window.status = "データ読み取りが完了しました";
proBar.style.display ="none";
Table1.style.display="none";
}
}


common.css を作成します。 >コードは次のとおりです:

コードをコピー コードは次のとおりです: .bi -loading-status

{

/** //*位置: 絶対;*/
幅: 250px;
パディング: 1px;
オーバーフロー: 非表示;読み込み状態 .text{
空白: nowrap ;
幅: 100%;
パディング: 1px;
.bi-loading-status .progress-bar {
ボーダー: 1px ソリッド ThreeDShadow;
高さ: 10px;
パディング: 1px;
オーバーフロー: 非表示;
.bi-loading-status .progress-bar div {
背景: ハイライト;
オーバーフロー: 非表示;
フィルター: Alpha(Opacity=0, FinishOpacity=100 , Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);
}


作成a progressbar.htm
コードは次のとおりです:




コードをコピーします


コードは次のとおりです:

;tr>

🎜>

フロントエンド コードは次のとおりです:




コードをコピー


コードは次のとおりです:



🎜>

背景コードは次のとおりです:

コピーcode コードは次のとおりです:

パブリック部分クラス _Default : System.Web.UI.Page
{
DataSet ds;
テキスト ts = 新しいテキスト();
int カウント = 0;
#region Page_Load
private void Page_Load(object sender, System.EventArgs e)
{
if (!Page.IsPostBack)
{
ds = Getgridview();
カウント = ds.Tables[0].Rows.Count;
Response.Write("count=" count);
string strFileName = Server.MapPath("progressbar.htm");
StreamReader sr = new StreamReader(strFileName, System.Text.Encoding.Default);
文字列 strHtml = sr.ReadToEnd();
Response.Write("

" strHtml "

");
sr.Close();
Response.Flush();
スレッド thread = new Thread(new ThreadStart(ThreadProc));
thread.Start();
LoadData(ds);
// Getgridview();
//loadデータ
thread.Join();
}
}
#endregion fixHeader
#region Getgridview
protected DataSet Getgridview()
{
ds = ts.QueryProcS("2009/07", "XXXX" );//これは逻辑層内のメソッドの 1 つです
return ds;
}
#endregion
#region ThreadProc
private void ThreadProc()
{
string strScript = "<script>setPgb('pgbMain','{0}', '" カウント "');</script>";
for (int i = 0; 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.データソース = dds.Tables[0].DefaultView;
this.GridView1.DataBind();
}
#endregion Web フォーム デザイナーが生成したコード
#region Web フォーム デザイナーが生成したコード
override protected void OnInit(EventArgs e)
{
//
// CODEGEN : この呼び出しは、ASP.NET Web フォーム デザイナに必要です。
//
InitializeComponent();
base.OnInit(e);
}
/**/
/// <概要>
/// デザイナーのサポートに必要なメソッド -
/// このメソッドの内容をコード エディターで変更しないでください。
///
private void InitializeComponent()
{
//this.Load = new System.EventHandler(this.Page_Load);
}
#endregion
}

は、次の図に示すように、ダウンロード面を起動します。

追加完了後の自動表示データ。