asp.net进度条效果的代码

2015-12-24 21:23:02 访问(2565) 赞(0) 踩(0)

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

public partial class WebForms_WebPages_code_htmlcodes_PorgressBarCode_Default : System.Web.UI.Page
{

    protected string beginHTML()
    {
        return @"
<!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"" type=""text/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>
";
    }
    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();

        string html = beginHTML();
        Response.Write(html);
        Response.Flush();
    }

    private void setProgress(int percent)
    {
        string jsBlock = "<script language=\"javascript\" type=\"text/javascript\">SetPorgressBar('" + percent.ToString() + "'); </script>";
        Response.Write(jsBlock);
        Response.Flush();
    }

    private void finishProgress()
    {
        string jsBlock = "<script language=\"javascript\" type=\"text/javascript\">SetCompleted();</script>";
        Response.Write(jsBlock);
        Response.Flush();
    }


    protected void Page_Load(object sender, EventArgs e)
    {
        beginProgress();

        for (int i = 1; i <= 100; i++)
        {
            setProgress(i);

            //此处用线程休眠代替实际的操作，如加载数据等
            System.Threading.Thread.Sleep(50);
        }

        finishProgress(); 
    }
}

示例链接

<!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" type="text/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>