<?php
//防止執行超時
set_time_limit(0);
//清空並關閉輸出緩存
ob_end_clean();
//需要循環的數據
for
(
$i
= 0;
$i
< 188;
$i
++)
{
$users
[] =
'Tom_'
.
$i
;
}
//計算數據的長度
$total
=
count
(
$users
);
//顯示的進度條長度，單位 px
$width
= 500;
//每條記錄的操作所占的進度條單位長度
$pix
=
$width
/
$total
;
//默認開始的進度條百分比
$progress
= 0;
?>
<html>
<head>
<title>動態顯示服務器運行程序的進度條</title>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<style>
body,div input {
font-family: Tahoma;
font-size: 9pt
}
</style>
<script language=
"JavaScript"
>
<!--
function
updateProgress(sMsg, iWidth)
{
document.getElementById(
"status"
).innerHTML = sMsg;
document.getElementById(
"progress"
).style.width = iWidth +
"px"
;
document.getElementById(
"percent"
).innerHTML = parseInt(iWidth / <?php
echo
$width
; ?> * 100) +
"%"
;
}
-->
</script>
</head>
<body>
<div style=
"margin:50px auto; padding: 8px; border: 1px solid gray; background: #EAEAEA; width: <?php echo $width+8; ?>px"
>
<div style=
"padding: 0; background-color: white; border: 1px solid navy; width: <?php echo $width; ?>px"
>
<div id=
"progress"
style=
"padding: 0; background-color: #FFCC66; border: 0; width: 0px; text-align: center; height: 16px"
></div>
</div>
<div id=
"status"
></div>
<div id=
"percent"
style=
"position: relative; top: -30px; text-align: center; font-weight: bold; font-size: 8pt"
>0%</div>
</div>
<?php
flush
();
//將輸出發送給客戶端瀏覽器
foreach
(
$users
as
$user
)
{
// 在此處使用空循環模擬較為耗時的操作，實際應用中需將其替換；
// 如果你的操作不耗時，我想你就沒必要使用這個腳本了 :)
for
(
$i
= 0;
$i
< 1000000;
$i
++)
{
}
?>
<script language=
"JavaScript"
>
updateProgress(
"正在操作用戶 <?php echo $user; ?> ...."
, <?php
echo
min(
$width
,
intval
(
$progress
)); ?>);
</script>
<?php
flush
();
//將輸出發送給客戶端瀏覽器，使其可以立即執行服務器端輸出的 JavaScript 程序。
$progress
+=
$pix
;
}
//end foreach
?>
<script language=
"JavaScript"
>
//最后將進度條設置成最大值 $width，同時顯示操作完成
updateProgress(
"操作完成！"
, <?php
echo
$width
; ?>);
</script>
<?php
flush
();
?>
</body>
</html