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