本文给大家分享 2 个 javascript 实现简单的进度条,一个是个人制作一个是网友实现的,都很不错,这里推荐给大家。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
示例一:
- <!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();
- }
- }
来源: