Web中带时间的进度条

最新推荐文章于 2024-07-19 15:32:49 发布

treeMountain

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量1.2k

点赞数

分类专栏： asp.net

asp.net 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

一、本进度条带有时间，但是时间是模拟的，非程序执行的真正所花的时间。

效果如下：

图一：图二：

图三：图四：

进度条代码：processbar.html

<html>
<head>
<title></title>
<script language="javascript">

//开始处理
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>

后台调用代码：

protected void Button1_Click(object sender, EventArgs e)
    {
        DateTime startTime = System.DateTime.Now;
        DateTime endTime = System.DateTime.Now;

        // 根据 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(1000);

        string jsBlock;
        // 处理完成
        jsBlock = "<script>BeginTrans('开始处理...');</script>";
        Response.Write(jsBlock);
        Response.Flush();

        System.Threading.Thread.Sleep(1000);

        //开始备份数据库
        SqlConnection sqlCon = new SqlConnection("Data Source=.;Initial Catalog=master;User ID=sa;PWD=sa;");
        string path = Server.MapPath("~\\DBBackup\\") + "Test.bak";
        string sqlBackup = string.Format("USE master;BACKUP DATABASE mytest TO DISK='{0}'", path);
        SqlCommand cmd = new SqlCommand(sqlBackup, sqlCon);

        try
        {
            if (System.IO.File.Exists(path))
            {
                throw new Exception("The file has existed.Please its name input again.");
            }
            sqlCon.Open();
            cmd.ExecuteNonQuery();
        }
        catch (Exception ex)
        {
            throw new Exception(ex.Message);
        }
        finally
        {
            cmd.Dispose();
            sqlCon.Close();
        }

        // 根据处理任务处理情况更新进度条
        for (int i = 1; i <= 100; i++)
        {
            System.Threading.Thread.Sleep(20);
            jsBlock = "<script>SetPorgressBar('" + "数据库备份" + 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();
    }

    protected string GetTimeSpan(DateTime startTime, DateTime endTime)
    {
        string timeSpan = string.Empty;
        TimeSpan ts = endTime - startTime;
        if (ts.Days > 0)
            timeSpan += ts.Days.ToString() + "天";
        if (ts.Hours > 0)
            timeSpan += ts.Hours.ToString() + "小时";
        if (ts.Minutes > 0)
            timeSpan += ts.Minutes.ToString() + "分钟";
        if (ts.Seconds > 0)
            timeSpan += ts.Seconds.ToString() + "秒";
        return timeSpan;
    }