进度条,今天用到了

最新推荐文章于 2016-07-19 23:02:19 发布

lorinzhang

最新推荐文章于 2016-07-19 23:02:19 发布

阅读量678

点赞数

分类专栏： asp.net 文章标签： function string html xhtml div javascript

本文链接：https://blog.csdn.net/lorinzhang/article/details/6387602

版权

asp.net 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

进度显示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">
<head>
<title></title>

        //开始处理
        function BeginTrans(msg) {
            WriteText("Msg1", msg);
        }

        //设置进度条进度
        function SetPorgressBar(msg, pos) {
            ProgressBar.style.width = pos + "%";
            WriteText("Msg1", msg + " 已完成" + pos + "%");
        }

        //处理结束
        function EndTrans(msg) {
            if (msg == "")
                WriteText("Msg1", "完成。");
            else
                WriteText("Msg1", msg);
        }

        //设置时间信息
        function SetTimeInfo(msg) {
            WriteText("Msg2", 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>
    <table align="center" style="height: 100%">
        <tr style="height: 45%">
            <td>
            </td>
        </tr>
        <tr>
            <td>
                <div id="Msg1" style="height: 16px;">
                    <font face="Verdana, Arial, Helvetica" size="2" color="#ea9b02"><b>正在加载...</b></font></div>
                <div id="ProgressBarSide" style="width: 300px; color: Silver; border-width: 1px;
                    border-style: Solid;">
                    <div id="ProgressBar" align="center" style="height: 20px; width: 0%; background-color: #316AC5;">
                    </div>
                </div>
                <div id="Msg2" style="height: 16px;">
                    <font face="Verdana, Arial, Helvetica" size="2" color="#ea9b02"><b></b></font>
                </div>
            </td>
        </tr>
        <tr style="height: 50%">
            <td>
            </td>
        </tr>
    </table>
</body>
</html>

调用文件.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);
        //显示进度
        DateTime startTime = System.DateTime.Now;
        DateTime endTime = System.DateTime.Now;
        // 根据处理任务处理情况更新进度条
        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>EndTrans('处理完成。'); </script>";
        Response.Write(jsBlock);
        Response.Flush();

        // 用时
        endTime = DateTime.Now;
        jsBlock = "<script>SetTimeInfo('用时" + GetTimeSpan(startTime, endTime) + "');</script>";

        Response.Write(jsBlock);
        Response.Flush();
    }

    public string GetTimeSpan(DateTime startTime,DateTime endTime)
    {
        TimeSpan ts = endTime - startTime;
        return ts.Days + "天" + ts.Hours + "小时" + ts.Minutes + "分钟" + ts.Seconds + "秒"+ts.Milliseconds;
    }