asp.net 实现进度条用来显示加载进度或程序处理进度

最新推荐文章于 2020-09-14 20:09:30 发布

diehe5608

最新推荐文章于 2020-09-14 20:09:30 发布

阅读量619

点赞数 1

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/smartsmile/archive/2012/11/09/6234385.html

版权

    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();
    }   

    private void beginProgress()
    {
        //根据ProgressBar.htm显示进度条界面   
        string templateFileName = System.IO.Path.Combine(Server.MapPath("."), "ProgressBar.htm");
        System.IO.StreamReader reader = new System.IO.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();
    }

<!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 = document.body.offsetHeight;
            var screenWidth = document.body.offsetWidth;
            document.getElementById("ProgressBarSide").style.width = Math.round(screenWidth / 2);
            document.getElementById("ProgressBarSide").style.left = Math.round(screenWidth / 4);
            document.getElementById("ProgressBarSide").style.top = Math.round(screenHeight / 2);
            document.getElementById("ProgressBarSide").style.height = "21px";
            document.getElementById("ProgressBarSide").style.display = "";

            //设置进度条百分比                       
            document.getElementById("ProgressBar").style.width = pos + "%";
            document.getElementById("ProgressText").innerHTML = pos + "%";
        }

        //完成后隐藏进度条
        function SetCompleted() {
            document.getElementById("ProgressBarSide").style.display = "none";
        }
     </script>  
</head>
    <body>
    <div id="ProgressBarSide" style="position:absolute;height:21px;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none">
        <div id="ProgressBar" style="position:absolute;height:21px;width:0%;background-color: green"></div>
        <div id="ProgressText" style="position:absolute;height:21px;width:100%;text-align:center"></div>
    </div>
    </body>
</html>

转载于:https://www.cnblogs.com/smartsmile/archive/2012/11/09/6234385.html

diehe5608

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
asp.net 实现进度条用来显示加载进度或程序处理进度

private void Page_Load(object sender, System.EventArgs e) { beginProgress(); for (int i = 1; i <= 100; i++) { setProgress(i); //此处用线...
复制链接

扫一扫