利用ASP.NET(C#)来制作页面进度条效果
1. 进度条模板文件 ProgressBar.htm
程序代码
<html>
<head>
<title></title>
<script language="javascript">
//设置进度条进度
function SetPorgressBar(msg, pos)
{
ProgressBar.style.width= pos + "%";
WriteText("Msg1",msg + " 已完成" + pos + "%");
}
//设置进度条完成信息
function SetCompleted(msg)
{
if(msg=="")
WriteText("Msg1","完成。");
else
WriteText("Msg1",msg);
}
// 更新文本显示信息
function WriteText(id, str)
{
var strTag = '<font face="Verdana, Arial, Helvetica" size="2" color="#ea9b02"><B>' + str + '</B></font>';
if (document.all) document.all[id].innerHTML = strTag;
}
</script>
</head>
<body>
<div id="Msg1"><font face="Verdana, Arial, Helvetica" size="2" color="#ea9b02"><b>正在加载</b></font></div>
<div id="ProgressBarSide" style="color:Silver;border-width:1px;border-style:Solid;width:300px;">
<div id="ProgressBar" style="background-color:#3366FF; height:21px; width:0%;"></div>
</div>
</body>
</html>
2. Default.aspx.cs
程序代码
protected void Page_Load(object sender, EventArgs e)
{
// 根据 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();
System.Threading.Thread.Sleep(200);
// 根据处理任务处理情况更新进度条
string jsBlock;
for (int i = 1; i <= 100; i++)
{
System.Threading.Thread.Sleep(10);
jsBlock = "<script>SetPorgressBar('" + "A" + i.ToString() + "','" + i.ToString() + "'); </script>";
Response.Write(jsBlock);
Response.Flush();
}
// 处理完成
jsBlock = "<script>SetCompleted('处理完成。'); </script>";
Response.Write(jsBlock);
Response.Flush();
}
. 运行 Default.aspx , 效果
