JavaScript进度条

Question

我想要一个进度条，当我点击一个按钮时应该显示，例如， “现在验证”。我的要求是检查2000个URL是否在工作。这在程序中执行时花费了很多时间。所以我需要向用户显示一个进度条来了解状态。我怎样才能使用JavaScript做到这一点？

Answer 1

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

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

Answer 2

你可以使用jQuery UI Progress bar简单，好看又容易实现，你只需要每隔一两秒更新一次值。

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

Answer 3

纯JavaScript是不可能的，你需要使用Ajax得到需要的服务器端脚本（我猜PHP在你的情况下）的当前状态。

将总计和完成的URL（或它们的计数）存储在数据库或会话中，并使用JavaScript Ajax请求调用PHP中的已完成URL的百分比。然后将该百分比作为Prutswonder在另一个答案中建议的jQuery栏。

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

Answer 4

我找到了一个弹出的JavaScript栏。可能需要进行一些修改以适应您的想法，但看起来很有希望。

代码

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

<SCRIPT LANGUAGE="JavaScript"> 

//Progress Bar script- by Todd King (tking@igpp.ucla.edu) 
//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 = "|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||" 
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> 

这里找到code

Answer 5

你可以使用ProgressBar.js。没有依赖关系，简单的API并支持主流浏览器。

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

见用法in the demo page.

Answer 6

的多个实例可以通过在一定的时间间隔增加DIV宽度使进度条。

例如，你可以在每个50毫秒的增加等div的1px的宽度，

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(); 

你可以在Progress Bar by JavaScript