示例一：
<!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"> <div id="val"></div> </div> <div id="percent">0%</div> <div></div> <br /> <input id="btn" type="button" value="Start" /> <br /> <input id="btnc" type="button" value="Clear" disabled /> <br /> <input id="btnp" type="button" value="Pause" 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"> <div id="ProgressBar"></div> <div id="ProgressText"></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实现简单的进度条】相关文章：
★ javascript实现table选中的行以指定颜色高亮显示
★ javascript实现Table间隔色以及选择高亮的方法
★ JavaScript实现DIV层拖动及动态增加新层的方法