使用 JavaScript 创建的酷炫进度条

• 下载源代码文件 - 11.7 KB

引言

我在开发 Web 应用程序时遇到了创建进度条的问题，因为应用程序执行后台处理需要一些时间。这可以是任何操作，例如数据库操作或文件上传。因此，我提出了一个进度条的概念。Microsoft 提供了用于基于 Windows 的应用程序的控件，但对于基于 Web 的应用程序，VS 中没有随附的现成控件。可以通过 JavaScript 实现解决方案。

背景

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

代码演练

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

1. Main.aspx：此文件是进度条的占位符。
2. Progressbar.aspx：此文件将填充进度条。

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

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

height 和 width 根据开发人员的选择进行设置。默认情况下，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);
      }
  }
}

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

结语

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