欢迎光临!

在网上查阅了很多相关资料,参照对比一番后自己整理了一下,做了个小例子。能够实现根据后台数据加载的进度在前台动态更新进度条、进度条在页面居中显示、在进度条内显示百分比,完成进度后隐藏进度条。个人感觉还是有一定的参考价值,贴出来先。

建立一个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(); 
    } 
}

前台页面代码在此省略,可以放置任意控件

posted on 2009-12-14 12:22  花拉子米  阅读(273)  评论(0编辑  收藏  举报
版权所有