• ASP.NET中进度条的简单应用


     1 <html xmlns="http://www.w3.org/1999/xhtml" id="mainWindow">
     2 <head>
     3     <title>无标题页</title>
     4     <script language="javascript">
     5         function SetPorgressBar(pos)
     6         {
     7             //设置进度条居中
     8             var screenHeight = window["mainWindow"].offsetHeight;
     9             var screenWidth = window["mainWindow"].offsetWidth;
    10             ProgressBarSide.style.width = Math.round(screenWidth / 2);
    11             ProgressBarSide.style.left = Math.round(screenWidth / 4);
    12             ProgressBarSide.style.top = Math.round(screenHeight / 2);
    13             ProgressBarSide.style.height = "21px";
    14             ProgressBarSide.style.display = "";
    15             
    16             //设置进度条百分比                      
    17             ProgressBar.style.width = pos + "%";
    18             ProgressText.innerHTML = pos + "%";
    19         }
    20 
    21         //完成后隐藏进度条
    22         function SetCompleted()
    23         {      
    24             ProgressBarSide.style.display = "none";
    25         }
    26      </script> 
    27 </head>
    28     <body>
    29     <div id="ProgressBarSide" style="position:absolute;height:21x;100px;color:Silver;border-1px;border-style:Solid;display:none">
    30         <div id="ProgressBar" style="position:absolute;height:21px;0%;background-color:#3366FF"></div>
    31         <div id="ProgressText" style="position:absolute;height:21px;100%;text-align:center"></div>
    32     </div>
    33     </body>
    34 </html>

    后台代码:

     1 Default.aspx.cs:
     2 
     3 using System;
     4 using System.Data;
     5 using System.Configuration;
     6 using System.Web;
     7 using System.Web.Security;
     8 using System.Web.UI;
     9 using System.Web.UI.WebControls;
    10 using System.Web.UI.WebControls.WebParts;
    11 using System.Web.UI.HtmlControls;
    12 using System.Threading;
    13 using System.IO;
    14 
    15 public partial class _Default : System.Web.UI.Page
    16 {
    17     private void beginProgress()
    18     {
    19         //根据ProgressBar.htm显示进度条界面
    20         string templateFileName = Path.Combine(Server.MapPath("."), "ProgressBar.htm");
    21         StreamReader reader = new StreamReader(@templateFileName,System.Text.Encoding.GetEncoding("GB2312"));
    22         string html = reader.ReadToEnd();
    23         reader.Close();
    24         Response.Write(html);
    25         Response.Flush();
    26     }
    27 
    28     private void setProgress(int percent)
    29     {
    30         string jsBlock = "<script>SetPorgressBar('" + percent.ToString() + "'); </script>";
    31         Response.Write(jsBlock);
    32         Response.Flush();
    33     }
    34 
    35     private void finishProgress()
    36     {
    37         string jsBlock = "<script>SetCompleted();</script>";
    38         Response.Write(jsBlock);
    39         Response.Flush();
    40     }
    41 
    42     private void Page_Load(object sender, System.EventArgs e)
    43     {
    44         beginProgress();
    45 
    46         for (int i = 1; i <= 100; i++)
    47         {
    48             setProgress(i);
    49 
    50             //此处用线程休眠代替实际的操作,如加载数据等
    51             System.Threading.Thread.Sleep(50);
    52         }
    53 
    54         finishProgress();
    55     }
    56 }
  • 相关阅读:
    VScode 最新eslint设置
    vue部署在二级目录
    实现网页比12像素小
    css一个很好用的hover显示
    VSCode设置
    vue发布后的一些问题
    设置cssrem,设置emmet
    js时间与时间戳之间的转换操作,返回天、小时、分,全家桶
    Error resolving template [xxx], template might not exist or might not be exist
    解决jenkins shell执行sonar-scanner提示命令存在的问题
  • 原文地址:https://www.cnblogs.com/ToFlying/p/3166370.html
Copyright © 2020-2023  润新知