Question

我正在尝试获取实时进度指示器。

在下面的代码片段中，我尝试根据从Web服务回调函数检索的项目数来设置DIV的宽度。

    for (i = 0; i < data.length; i++) {

        table += '<tr>';
        table += '<td>' + data[i].ItemId + '</td>';
        table += '<td></td>';
        table += '<td>' + data[i].Name + '</td>';
        table += '<td>' + data[i].Unit + '</td>';
        table += '<td><input type=text value=' + data[i].Quantity + '></td>';
        table += '<td>' + data[i].Brands + '</td>';
        table += '<td><img border=0 src=../images/Delete_icon.gif></td>';
        table += '</tr>';

        $('#divProgressIndicator').width((100 * (i / data.length)) + '%');

    }

如上面的代码所示，在执行for循环后，我只看到divProgressIndicator填充了背景颜色，我无法看到进度。我可以在for循环中实现这一点，或者我需要使用其他东西。此致

Answer 1

首先，你要为每次迭代更新#divProgressIndicator，所以它最后一次通过它是'（100 * 1）％'，这将给你100％，然后填充div。 / p>

你需要的是（（行的总行数/完成的行数）* 100）％。这将在for循环之外完成

Answer 2

您可能需要考虑使用jquery进度条，而不是编写自己的进度条，有关详细信息，请参阅http://docs.jquery.com/UI/Progressbar。

关于你的代码我不完全明白什么是确切的html和确切的问题，但在我看来，创建一个进度条你需要两个div，绝对位于同一个地方，一个是固定宽度和透明（或较低的z-index）和边框，而第二个div应该有一个颜色，并应根据进度改变宽度。

如果您确实有这样的设置，并且您的问题是只显示了背景div，那么原因是背景div位于进度div的顶部，解决方案是将背景div设置为透明或通过将其z-index设置为更高的值来将进度div设置在顶部。

实时进度指标

2 个答案: