web进度条

最新推荐文章于 2023-09-18 10:57:18 发布

明外

最新推荐文章于 2023-09-18 10:57:18 发布

阅读量3k

点赞数

分类专栏：原创 .NET 文章标签： web进度条实用进度条进度条 webform进度条

本文链接：https://blog.csdn.net/xmroom/article/details/10455671

版权

.NET 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

原创

17 篇文章 1 订阅

订阅专栏

在处理长任务，大数据交互是，程序容易造成假死，用户也不知道程序在做什么，于是就需要一个进度条，但是网上进度条实例，效果都不佳，都不能实时更新进度条，比如伪进度条就只能是一张图片，还有的是事务处理完后，记录监控的时间，再完成进度条显示，这肯定是不可以的。还有一种是比较实用，但是把事务处理随着进度条一起处理，也就是进度条是从1%到100%，那么事务就处理一百次。于是结合网上实例，我写了下面的这个多线程进度条。

我写的这个进度条的特点是：

可以根据事务处理的时间，实时更新进度条，简单的说是：比如一个长任务，大数据交互大概要话4分钟的话，那么我们就可以把进度条从1%到100%，每跟进一步，就是40微秒，当然这是多线程的。一个线程处理进度条，主线程处理长任务，大数据交互部分，也就是说如果一个长任务，大数据交互大于4分钟，那么进度条先执行完，但是进度条线程会让自己全部执行完，才把cup交给主线程。如果正常情况一个长任务，大数据交互小于或等于，那么正好是我们要的效果。

下面开始截图：

实际项目截图：单击提取：

测试截图图：

下面开始开代码：

1,新建web项目：

2.添加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>
  <base  target=_self />
  <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";
      }

      function exception() {
          ProgressBarSide.style.display = "none";
      }
  
  </script>
 </head>
 <body style=" background-color:transparent">
  <div id="ProgressBarSide" style="position:absolute;height:21px;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none;background-color:transparent">
   <div id="ProgressBar" style="position:absolute;height:21px;width:0%;background-color:#3366FF"></div>
   <div id="ProgressText" style="position:absolute;height:21px;width:100%;text-align:center"></div>
  </div>
 </body>
</html>

3.添加Demo.aspx页面

Demo.aspx 代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="web进度条1.Demo" %>

<!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 runat="server">
    <title></title>
</head>

<body>
    <form id="form1" runat="server">
    <div>
    <asp:button runat="server" text="Button" οnclick="Unnamed1_Click" />
    </div>
    </form>
</body>
</html>

Demo.aspx.cs代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;
using System.IO;

namespace web进度条1
{
    public partial class Demo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        #region 进度条方法
        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();
            Thread thread = new Thread(new ThreadStart(ThreadProc));
            thread.Start();
            LoadData();//load数据 
            thread.Join();



        }
        private void setProgress(int percent)
        {
            Thread.Sleep(50);
            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();
            Response.Clear();
        }
        private void exception()
        {
            string jsBlock = "<script>exception();</script>";
            Response.Write(jsBlock);
            Response.Flush();
            Response.Clear();

        }
        #endregion

        #region ThreadProc
        private void ThreadProc()
        {

            for (int i = 1; i <= 100; i++)
            {

                setProgress(i);
            }
        }
        #endregion

        #region LoadData
        private void LoadData()
        {
            //事务处理部分，下面注释的是我从数据库读取数据的测试
            //using (DataSet ds = commonws.GetDsSql("病程信息", "Dome"))
            //{
            //    datatRead();
            //}

        }
        #endregion

        protected void Unnamed1_Click(object sender, EventArgs e)
        {
            beginProgress();
            finishProgress();
        }

    }
}

下面附属一下别人的代码：

for(int i=0;i<11;i++)
{

//事务处理部分

- - - - - - -

//显示进度条

- - - - - -

}

上面的循环一百，事务处理也是一百次，这个效果是达到，貌似事务执行时间加长了很多？

难道循环体执行了一百遍，但是事务只执行了一遍吗？

源码下载：http://download.csdn.net/detail/yucihai/6027825

明外

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web进度条

在处理长任务，大数据交互是，程序容易造成假死，用户也不知道程序在做什么，于是就需要一个进度条，但是网上进度条实例，效果都不佳，都不能实时更新进度条，比如伪进度条就只能是一张图片，还有的是事务处理完后，记录监控的时间，再完成进度条显示，这肯定是不可以的。还有一种是比较实用，但是把事务处理随着进度条一起处理，也就是进度条是从1%到100%，那么事务就处理一百次。于是结合网上实例，我写了下面的这个多线程
复制链接

扫一扫