javascript实现简单的进度条
摘要：本文给大家分享2个javascript实现简单的进度条，一个是个人制作一个是网友实现的，都很不错，这里推荐给大家。示例一：?12345678...
本文给大家分享2个javascript实现简单的进度条，一个是个人制作一个是网友实现的，都很不错，这里推荐给大家。
示例一：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 !doctype html meta charset=utf8 titleProcess 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+) } 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 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 id=percent style=float:left; line-height:30px;0% div style=clear:both input id=btn type=button value=Start onClick=s(0) input id=btnc type=button value=Clear onClick=c() disabled / input id=btnp type=button value=Pause onClick=p() disabled / /body /html再来分享一个结合.net的
建立一个WEB工程，添加新项-HTML页面，命名为ProgressBar.htm，内容如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml id=mainWindow 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 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 id=ProgressText style=position:absolute;height:21px;width:100%;text-align:center /body /html后台代码，Default.aspx.cs：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 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 = bine(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 = scriptSetPorgressBar(' + percent.ToString() + /script Response.Write(jsBlock); Response.Flush(); } private void finishProgress() { string jsBlock = scriptSetCompleted();/script Response.Write(jsBlock); Response.Flush(); } private void Page_Load(object sender, System.EventArgs e) { beginProgress(); for (int i = 1; i i++) { setProgress(i); //此处用线程休眠代替实际的操作，如加载数据等 System.Threading.Thread.Sleep(50); } finishProgress(); } }【javascript实现简单的进度条】相关文章：