<style type="text/css">
.pbar {
background: #EEEEEE;
border: 1px solid #CCCCCC;
margin: 1px;
height: 10px;
width: 15px;
float: left;
}
.blueBar{
background: #C8E3FF;
border: 1px solid #0569BA;
margin: 1px;
height: 10px;
width: 15px;
float: left;
}
</style>
<script language="javascript" type="text/javascript">
function setCss(objName,css,objNameCount){
if(objNameCount != 1){
for(var i=1;i<objNameCount;i++){
getObj(objName+i).className=css;
}
}
}
function getObj(obj){
return document.getElementById(obj);
}
</script>
<?php
echo '<div style="float: left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">System Loading...</div>';
for ($i=1; $i<10; $i++)
{
//调用js设置已经输出的div颜色
echo '<script language="javascript" type="text/javascript">';
echo 'setCss("div","blueBar",'.$i.');';
echo '</script>';
echo '<div class="pbar" id="div'.$i.'"> </div>';
ob_flush();
//刷新缓冲
flush();
//睡一秒
sleep(1);
}
//把最后一个div变色
echo '<script language="javascript" type="text/javascript">';
echo 'setCss("div","blueBar",10);';
echo '</script>';
ob_end_flush();
?>
一个有点意思的输出效果
(140)
