2015-04-27 53 views
2

我試圖製作一個顯示長PHP腳本狀態的進度條。目前我有一個代碼可以處理給定數量的預設任務,但我希望它動態地處理整個腳本的狀態。PHP&Javascript進度條

下面是代碼:

<html lang="en"> 
<head> 
<title>Progress Bar</title> 
</head> 
<body> 
<!-- Progress bar holder --> 
<div id="progress" style="width:500px;border:1px solid #ccc; display: inline-block;"></div> &nbsp; <div style="display: inline-block;" id="somethn"></div> <br> 
<!-- Progress information --> 
<div id="information" style="width"></div> 

<?php 
// Total processes 
$total = 3000; 
// Loop through process 
for($i=1; $i<=$total; $i++){ 
// Calculate the percentation 
$percent = intval($i/$total * 100)."%"; 

// Javascript for updating the progress bar and information 
echo '<script language="javascript"> 
document.getElementById("progress").innerHTML="<div style=\"width:'.$percent.';background-color:#ddd;\">&nbsp;</div>"; 
document.getElementById("somethn").innerHTML="'.$percent.'"; 
document.getElementById("information").innerHTML="'.$i.' row(s) processed."; 
</script>'; 

// This is for the buffer achieve the minimum size in order to flush data 
echo str_repeat(' ',1024*64); 

// Send output to browser immediately 
flush(); 
} 
// Tell user that the process is completed 
// echo '<script language="javascript">document.getElementById("information").innerHTML="Process completed"</script>'; 
?> 

</body> 
</html> 

怎麼會這樣的事情來achived?

+4

你可以用」用PHP。在完成之前,PHP不會輸出到瀏覽器。您可能需要一個後臺任務,或單獨的Ajax調用,一個運行該函數,另一個需要跟蹤進度的另一個函數。 – Devon

+0

@Devon Ive聽說Javascript也可以被使用。這是真的? :) – user3649604

+0

不是,如果它是一個獨立的頁面被加載到瀏覽器。瀏覽器無法知道什麼服務器達到 – charlietfl

回答