简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Javascript implementiert eine einfache Fortschrittsleiste_Javascript-Fähigkeiten

Javascript implementiert eine einfache Fortschrittsleiste_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:51:501125Durchsuche

Beispiel 1: 

<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>Process Bar</title>
<script>
var t;

function s(c)
{
  if(c<=100)
  {
    val.style.width=c+"%";
    percent.innerHTML=c+"%";
    btn.disabled=true;
    btnp.disabled=false;
    c=c+10;
    t=setTimeout("s("+c+")",500);
  }
  else
  {
    clearTimeout(t);
    btnc.disabled=false;
    btnp.disabled=true;
    return;
  }
}

function c()
{
  clearTimeout(t);
  val.style.width="0px";
  percent.innerHTML="0%";
  btn.disabled=false;
  btnc.disabled=true;
  btnp.disabled=true;
  btnp.value='Pause';
}

function p()
{
  var temp;
  if('Pause' == btnp.value)
  {
    clearTimeout(t);
    btnp.value='Go on';
    btnc.disabled=false;
  }
  else
  {
    temp=val.style.width;
    btnp.value='Pause';
    var k=parseInt(delEnd(temp));
    s(k);
    btnc.disabled=true;
  }  
}

function delEnd(str)
{
  var temp="";
  for(var i=0; i < str.length-1; i++)

  {
    temp=temp+str[i];
  }

  return temp;

}
</script>
</head>

<body>
<div id="bar" style="width:300px; height:30px; border:solid 1px; float:left;">
 <div id="val" style="height:100%; background-color:#03F; width:0px;"></div>
</div>
<div id="percent" style="float:left; line-height:30px;">0%</div>
<div style="clear:both"></div>
<br />
<input id="btn" type="button" value="Start" onClick="s(0)" />
<br />
<input id="btnc" type="button" value="Clear" onClick="c()" disabled />
<br />
<input id="btnp" type="button" value="Pause" onClick="p()" disabled />
</body>
</html>

Lassen Sie mich noch eins teilen, das .net kombiniert

Erstellen Sie ein WEB-Projekt, fügen Sie ein neues Element hinzu ->HTML-Seite, nennen Sie es ProgressBar.htm, der Inhalt lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="mainWindow">
<head>
  <title>无标题页</title>
  <script language="javascript">
    function SetPorgressBar(pos)
    {
      //设置进度条居中
      var screenHeight = window["mainWindow"].offsetHeight;
      var screenWidth = window["mainWindow"].offsetWidth;
      ProgressBarSide.style.width = Math.round(screenWidth / 2);
      ProgressBarSide.style.left = Math.round(screenWidth / 4);
      ProgressBarSide.style.top = Math.round(screenHeight / 2);
      ProgressBarSide.style.height = "21px";
      ProgressBarSide.style.display = "";
       
      //设置进度条百分比            
      ProgressBar.style.width = pos + "%";
      ProgressText.innerHTML = pos + "%";
    }

    //完成后隐藏进度条
    function SetCompleted()
    {    
      ProgressBarSide.style.display = "none";
    }
   </script> 
</head>
  <body>
  <div id="ProgressBarSide" style="position:absolute;height:21x;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none">
    <div id="ProgressBar" style="position:absolute;height:21px;width:0%;background-color:#3366FF"></div>
    <div id="ProgressText" style="position:absolute;height:21px;width:100%;text-align:center"></div>
  </div>
  </body>
</html>

Backend-Code, Default.aspx.cs: 

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Threading;
using System.IO;

public partial class _Default : System.Web.UI.Page 
{
  private void beginProgress()
  {
    //根据ProgressBar.htm显示进度条界面
    string templateFileName = Path.Combine(Server.MapPath("."), "ProgressBar.htm");
    StreamReader reader = new StreamReader(@templateFileName,System.Text.Encoding.GetEncoding("GB2312"));
    string html = reader.ReadToEnd();
    reader.Close();
    Response.Write(html);
    Response.Flush();
  }

  private void setProgress(int percent)
  {
    string jsBlock = "<script>SetPorgressBar('" + percent.ToString() + "'); </script>";
    Response.Write(jsBlock);
    Response.Flush();
  }

  private void finishProgress()
  {
    string jsBlock = "<script>SetCompleted();</script>";
    Response.Write(jsBlock);
    Response.Flush();
  }

  private void Page_Load(object sender, System.EventArgs e) 
  {
    beginProgress();

    for (int i = 1; i <= 100; i++)
    {
      setProgress(i);

      //此处用线程休眠代替实际的操作，如加载数据等
      System.Threading.Thread.Sleep(50);
    }

    finishProgress(); 
  } 
}

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery-Methode zum Wechseln des ausgewählten Status aller Kontrollkästchen_jqueryNächster Artikel：jQuery-Methode zum Wechseln des ausgewählten Status aller Kontrollkästchen_jquery

In Verbindung stehende Artikel

Mehr sehen