实时网页样式的ProgressBar控件

分享于 

2分钟阅读

Web开发

  繁體 雙語

介绍

我遇到了在web应用程序中创建进度条的问题,因为应用程序花了一些时间来处理 background 进程。 这可能是从数据库操作到文件上传的任何内容。 所以我提出了一个进度栏概念。 微软为基于 Windows的应用提供了一个控制,但对于基于web的应用程序,没有现成的可用控件,vs 一个解决方案可以通过。

背景

我使用 ASP.NET 1.1和JavaScript构建了这个示例应用程序。

代码演练

示例应用程序包含两个ASPX文件:

  • Main.aspx: 这里文件是进度栏的放置器。
  • Progressbar.aspx: 这个文件将填充进度栏。

我们将首先检查 Main.aspx 文件。 这里文件包含除由框架生成的默认代码之外的单行代码。

<iframeheight=100 frameborder=0 width=900 id=frm runat="server"src="progressbar.aspx"></iframe>

根据开发者的选择设置 heightwidth。 默认情况下,iframe 将显示边框;如果愿意,可以避免将 frameborder 属性设置为 0.

现在,我们将检查 Progressbar.aspx 文件。

function progress()
{
 var tend = "</tr></table>";
 var tstrt = "<table><tr>";
 scell = scell + "<td style='width:10;height:10' bgcolor=red>";
 document.getElementById("cell1").innerHTML = sbase + tstrt + scell + tend; 
 if( i <50)
 // total 50 cell will be created with red color. { 
 i = i + 1;
 timerID = setTimeout("progress()",1000);
 // recursive call }
 else {
 if(timerID)
 {
 clearTimeout(timerID);
 }
 }
}

上面 代码将生成带有红色的进度条。

结束语

你不需要在进度栏中使用 iframe。 你也可以在父页面中使用相同的JavaScript和HTML代码。


WEB  控制  时间  style  进度  实时  
相关文章