JavaScript 进度条

Question

我想要一个进度条，当我单击按钮时应该显示进度条，例如“立即验证”。我的要求是检查 2000 个 URL 是否有效。这在程序中执行时花费了大量时间。所以我需要向用户显示一个进度条以了解状态。我如何使用 JavaScript 来做到这一点？

Answer 1

您可以使用 jQuery UI 进度条 简单、美观且易于实现，您只需要更新每隔一两秒的值。

$("#progressbar").progressbar({
        value: 37
    });

Answer 2

您必须使用 Ajax 并每 2-3 秒访问服务器/数据库并获取状态并显示在网页上。要显示进度条，您可以使用具有不同 td 的表格，并使用状态结果设置这些 td 单元格的背景颜色。

对于进度条，创建一个包含 10 个等宽单元格的表格，并假设状态为 40%，那么您将设置前 4 个单元格的背景指示 40%。

Answer 3

您可以使用 ProgressBar.js。无依赖性、简单的 API 并支持主要浏览器。

var line = new ProgressBar.Line('#container');
line.animate(1);

在演示页面中查看更多使用示例。

Answer 4

纯 JavaScript 是不可能的，您需要使用 Ajax 来获取当前状态这需要服务器端脚本（我猜你的情况是 PHP ）。

将总数和已完成的 URL（或其计数）存储在数据库或会话中，并使用 PHP 获取已完成 URL 的百分比（由 JavaScript Ajax 请求调用）。然后按照 Prutswonder 在另一个答案中建议的方式将百分比提供给 jQuery 栏。

我建议使用 JSON 或简单的纯文本来接收 JavaScript 中的数据，XML 将是不必要的开销（所以它实际上是 AJAJ 或 AJAP，而不是 Ajax）。

Answer 5

我发现了一个弹出的 Javascript 栏。可能需要一些修改才能满足您的想法，但看起来很有希望。

代码是

<style>
<!--
.hide { position:absolute; visibility:hidden; }
.show { position:absolute; visibility:visible; }
-->
</style>

<SCRIPT LANGUAGE="JavaScript">

//Progress Bar script- by Todd King ([email protected])
//Modified by JavaScript Kit for NS6, ability to specify duration
//Visit JavaScript Kit (http://javascriptkit.com) for script

var duration=3 // Specify duration of progress bar in seconds
var _progressWidth = 50;    // Display width of progress bar.

var _progressBar = "

Answer 6

Answer 7

Answer 8

Answer 9

Answer 10

Answer 11

Answer 12

Answer 13

Answer 14

Answer 15

Answer 16

|||||||||"
var _progressEnd = 5;
var _progressAt = 0;

// Create and display the progress dialog.
// end: The number of steps to completion
function ProgressCreate(end) {
// Initialize state variables
_progressEnd = end;
_progressAt = 0;

// Move layer to center of window to show
if (document.all) { // Internet Explorer
progress.className = 'show';
progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2);
progress.style.top = document.body.scrollTop+(document.body.clientHeight/2) - (progress.offsetHeight/2);
} else if (document.layers) { // Netscape
document.progress.visibility = true;
document.progress.left = (window.innerWidth/2) - 100+"px";
document.progress.top = pageYOffset+(window.innerHeight/2) - 40+"px";
} else if (document.getElementById) { // Netscape 6+
document.getElementById("progress").className = 'show';
document.getElementById("progress").style.left = (window.innerWidth/2)- 100+"px";
document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40+"px";
}

ProgressUpdate(); // Initialize bar
}

// Hide the progress layer
function ProgressDestroy() {
// Move off screen to hide
if (document.all) { // Internet Explorer
progress.className = 'hide';
} else if (document.layers) { // Netscape
document.progress.visibility = false;
} else if (document.getElementById) { // Netscape 6+
document.getElementById("progress").className = 'hide';
}
}

// Increment the progress dialog one step
function ProgressStepIt() {
_progressAt++;
if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
ProgressUpdate();
}

// Update the progress dialog with the current state
function ProgressUpdate() {
var n = (_progressWidth / _progressEnd) * _progressAt;
if (document.all) { // Internet Explorer
var bar = dialog.bar;
} else if (document.layers) { // Netscape
var bar = document.layers["progress"].document.forms["dialog"].bar;
n = n * 0.55; // characters are larger
} else if (document.getElementById){
var bar=document.getElementById("bar")
}
var temp = _progressBar.substring(0, n);
bar.value = temp;
}

// Demonstrate a use of the progress dialog.
function Demo() {
ProgressCreate(10);
window.setTimeout("Click()", 100);
}

function Click() {
if(_progressAt >= _progressEnd) {
ProgressDestroy();
return;
}
ProgressStepIt();
window.setTimeout("Click()", (duration-1)*1000/10);
}

function CallJS(jsStr) { //v2.0
return eval(jsStr)
}

</script>

<SCRIPT LANGUAGE="JavaScript">

// Create layer for progress dialog
document.write("<span id=\"progress\" class=\"hide\">");
document.write("<FORM name=dialog id=dialog>");
document.write("<TABLE border=2 bgcolor=\"#FFFFCC\">");
document.write("<TR><TD ALIGN=\"center\">");
document.write("Progress<BR>");
document.write("<input type=text name=\"bar\" id=\"bar\" size=\"" + _progressWidth/2 + "\"");
if(document.all||document.getElementById) // Microsoft, NS6
document.write(" bar.style=\"color:navy;\">");
else // Netscape
document.write(">");
document.write("</TD></TR>");
document.write("</TABLE>");
document.write("</FORM>");
document.write("</span>");
ProgressDestroy(); // Hides

</script>

<form name="form1" method="post">
<center>
<input type="button" name="Demo" value="Display progress" onClick="CallJS('Demo()')">
</center>
</form>

<a href="javascript:CallJS('Demo()')">Text link example</a>

<p align="center">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript
Kit</a></p>

在这里找到代码

Answer 17

您可以通过每隔一段时间增加 div 宽度来制作进度条。

例如，您可以每 50 毫秒增加 1px 的 div 宽度，例如，

var width = 1
function render (){
    if(width <=100){
        // apply width to div for progress bar
        div.style.width = width + "px";
        setTimeout(
            function (){
                render();
                width++;
            },50
        );
    }
}
render();