Through our great CSS, we can achieve a very beautiful progress bar style. With the effect of Javascript, we can completely "deceive" our users, so that they have the patience to wait for the browser to complete the process. The above principle already knew, then can see the code directly. I'm using the jQuery framework, because it might be easier to understand the short code.
Of course there's a lot more to be done with this control, and I'm just offering a way to follow WEB standards. Don't say much nonsense.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <p tml xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content= "text/h" Tml Charset=utf-8 "/> <title>javascript Progress Bar demo-jb51.net</title> <script type= "Text/javascript" src= "http://www.jb51.net/jslib/jquery/jquery.js" ></script> <style type= "Text/css" &G T #progress {background:white; height:20px; padding:2px; border:1px solid green; margin:2px;} #progress span {background:green; height:16px; text-align:center; padding:1px; margin:1px; Display:block; Color:yellow; Font-weight:bold; font-size:14px; width:0%;} </style> <script type= "Text/javascript" > var progress_node_id = "Progress"; function Setprogress (progress) { if (progress) {$ ("#" + progress_node_id + "> span"). CSS ("width", String (Progress) + "%"); $ ("#" + progress_node_id + "> span"). HTML (String (Progress) + "%"); } var i = 0; function doprogress () {if (i >) {alert ("Progress Bar finished!"); Return } if (I <=) {settimeout ("doprogress ()", 500); Setprogress (i); i++; } $ (document). Ready (function () {doprogress (); }); </script> </pead> <body> <p>javascript progress bar demo</p> <p> principle is to use Javascrip t controls the width of the SPAN CSS (as well as other styles), see link:http://www.jb51.net/article/13993.htm</p> <div id= "Progress" For more information ><s Pan> </span></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
