使用HTML创建动态进度条-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_8510/article/details/82508199

新建一个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:218px;color:Silver;border-width:1px;border-style:Solid;display:none;background-image:url(/Images/WaitingFrame/BlockAreaTitle.gif);background-repeat :repeat-x">

<div id="ProgressBar" style="position:absolute;height:21px;width:0%;background-image:url(/images/WaitingFrame/ProgressBar.gif);background-repeat :repeat-x"></div>

　　<div id="ProgressText" style="position:absolute;height:21px;width:100%;text-align:center"></div>

　　</div>


　　


　<!--　<div id="ProgressBarSide" style='position:absolute;height:21x;width:100px;border-width:1px;border-style:Solid;display:none;background-image:url(/Images/WaitingFrame/BlockAreaTitle.gif);background-repeat :repeat-x'>
　　
</div>
　　<div id="ProgressBar" style='position:absolute;height:21px;width:0%;background-image:url(/images/WaitingFrame/ProgressBar.gif);background-repeat :repeat-x'></div>
<div id="ProgressText" style="position:absolute;height:21px;width:100%; color:Silver;text-align:center"></div>

　　-->

　　</body>

　　</html>

Default.aspx


using System.Threading;
using System.IO;


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

        }

制作进度条