Php tutorial webpage special effects dynamic display of the progress bar of the server running program
If ('source' = $ _ get ['act ']) {// view the source code
Show_source ($ _ server ["script_filename"]);
Exit;
} // End if
Set_time_limit (0 );
For ($ I = 0; I I <5000; $ I ++ ){
$ Users [] = 'Tom _ '. $ I;
} // End
$ Width = 500; // The length of the displayed progress bar, in px
$ Total = count ($ users); // total number of records to be operated
$ Pix = $ width/$ total; // The length of the progress bar for each operation record
$ Progress = 0; // The length of the current progress bar
?>
<Html>
<Head>
<Title> </title>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/>
<Style>
Body, div input {font-family: tahoma; font-size: 9pt}
</Style>
<Script language = "webpage effect">
<! --
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: 4px; padding: 8px; border: 1px solid gray; background: # eaeaea; width: <? Php echo $ width + 8;?> Px ">
<Div> <font color = "gray"> the dynamic effect of the following progress bar is generated by the server-side php program combined with the client-side webpage special effect program. </Font> </div>
<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: 8 PT "> 0% </div>
</Div>
<? Php
Flush (); // send the output to the client browser
Foreach ($ users as $ user ){
// Use an empty loop here to simulate time-consuming operations. replace them in actual applications;
// If your operation is not time-consuming, I think you do not need to use this script :)
For ($ I = 0; I I <10000; $ I ++ ){
;;
}
?>
<Script language = "javascript">
Updateprogress ("operating users" <? Php echo $ user;?> "...", <? Php echo min ($ width, intval ($ progress) ;?> );
</Script>
<? Php
Flush (); // send the output to the client browser so that it can immediately execute the javascript program output by the server.
$ Progress + = $ pix;
} // End foreach
// Finally, set the progress bar to the maximum value $ width, and the operation is complete.
?>
<Script language = "javascript">
Updateprogress ("Operation completed! ", <? Php echo $ width;?> );
</Script>
<? Php
Flush ();
?>
<Input type = "button" value = "view source code" onclick = "document. location. href = '<? Php echo $ _ server ['php _ self '];?>? Act = source '"/>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
