javascript实现简单的进度条

2019-11-20 12:07:15

字体：大中小

来源：转载

供稿：网友

示例一：

<!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>

再来分享一个结合.net的

建立一个WEB工程，添加新项->HTML页面，命名为ProgressBar.htm，内容如下：

<!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>

后台代码，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();   } }

上一篇：深入理解JavaScript的React框架的原理

下一篇：JavaScript实现添加、查找、删除元素