关于前台脚本控制的进度条的实现

-z-

     与上一篇关于进度条的文章不同的是，上一篇文章进度条实现功能的应用主要在于ASP.NET页面在打开时，设置进度条控制页面后台数据的加载过程，以前台进度条控件的显示为目的的。这篇文章，是我针对上述功能进行的修改，主要实现了前台页面，数据加载时，进度条的显示控制。主要应用于当前台js脚本需要大量计算数据时，提供进度条显示控制。

     代码主要在页面前台脚本块的实现。如下：

     进度条控件：

 <div style="MARGIN-TOP:5px">上传进度：
 <div id="ProgressBarSide" style="BORDER-TOP-WIDTH:1px;DISPLAY:none;BORDER-LEFT-WIDTH:1px;BORDER-BOTTOM-WIDTH:1px;WIDTH:100px;COLOR:silver;POSITION:absolute;HEIGHT:21px;BORDER-RIGHT-WIDTH:1px;boder-style:solid">
   <div id="ProgressBar" style="WIDTH:0%;POSITION:absolute;HEIGHT:21px;BACKGROUND-COLOR:#3366ff" runat=server></div>
   <div id="ProgressText" style="WIDTH:100%;POSITION:absolute;HEIGHT:21px;TEXT-ALIGN:center" runat=server></div>
   </div>
 </div>

 

 

     加载按钮：

<input id="uploadBtn" type="button" value="导入数据" onclick="loadData();" runat="server">

     脚本代码：

 

 

function SetPorgressBar(pos)
            {
                //alert(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 = "inline";
                    
                //设置进度条百分比                       
                ProgressBar.style.width = pos + "%";
                ProgressText.innerHTML = pos + "%";
            }
            var i=1;
            function loadData()
            {
                SetPorgressBar(i);
                i++;    
                if(i<=100)
                {
                    setTimeout("loadData()",50);
                }
                else    //完成加载之后，隐藏进度条
                {
                    
                    i=1;    //加载完成后，需要重新将计数器初始化，以便于可以再次加载
                    ProgressText.innerText = "加载完成！";
                }
                
            }
            
            function finishProgress()
            {
                ProgressBarSide.style.display = "none";
            }

     基本功能代码都在这里，单击按钮可以实现进度条的显示控制。现在一直有个问题：如何根据后台读取数据，实现前台进度条控件的显示功能呢！我试验了一个方法，但在后台为ProgressBar设置加载比例和百分比值时，后台是作为一个线程来处理的，不能实现前台进度条控件的逐步显示。不知哪位仁兄提供一些解决方案！