实现进度条效果实例_使用进度条实现查询效果实现进度条效果中同显示进度比例名字不存在时,显示查-CSDN博客

本文链接：https://blog.csdn.net/jack15850798154/article/details/6762396

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

<!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 runat="server">
    <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>
    <form id="form1" runat="server">
    <asp:Button ID="Test" runat="server" Text="进度按钮" οnclick="Test_Click" />
       <div id="ProgressBarSide" style="position: absolute; width: 200px; height: 30px;
            z-index: 100; color: Silver; border-width: 1px; border-style: Solid; display: none">
            <div id="ProgressBar" style="position: absolute; height: 20px; width: 100%; background-color: #3366FF;
                left: 0px; top: -1px;">
                正在导入......
            </div>
            <div id="ProgressText" style="position: absolute; height: 20px; width: 100%; text-align: center;
                vertical-align: middle; left: 0px; top: 0px;">
            </div>
        </div>
    </form>
</body>
</html>

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Data;
/*
 * 更新说明：进度条实例
 * 更新日期：2011-08-29
 */
public partial class Default5 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    //开始进度
    private void beginProgress()
    {
        string templateFileName = Path.Combine(Server.MapPath("."), "Default5.aspx");
        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();
    }

    //测试精度条运行
    protected void Test_Click(object sender, EventArgs e)
    {
        beginProgress();
        for (int i = 1; i <= 100; i++)
        {
            setProgress(i);
            //此处用线程休眠代替实际的操作，如加载数据等
            System.Threading.Thread.Sleep(50);
        }
        finishProgress();
    }
    
}