Simple progress bar control written by Javascript jquery CSS
From: http://www.huiyi8.com/jindutiao/jquery/
Many times users need to wait for your "bloated" Javascript code processing to complete (WEB 2.0 features). Perhaps adding something like a progress bar in the meantime makes the user a bit "comforting". This thing is not complicated to achieve, it is to get the total processing entries, and then get a percentage, and then display the output.
with our great CSS, we can implement a very beautiful progress bar style. Together with the Javascript effect, we can "cheat" our users and let them have the patience to wait for the browser to finish processing. The above principles have been known, then you can directly see the code. I'm still using the jQuery framework, because such a short code might be easier to understand.
Of course there's a lot more to do with this control, and I just provide a way to follow the 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" >
<meta http-equiv= "Content-type" content= "text/html; 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" >
#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 > 100) {
Alert ("Progress Bar finished!");
Return
}
if (i <= 100) {
SetTimeout ("doprogress ()", 500);
Setprogress (i);
i++;
}
}
$ (document). Ready (function () {
Doprogress ();
});
</script>
<body>
The <p> principle is to use Javascript to control the width of the SPAN CSS (and other styles), see links for more information: <a
href= "Http://www.huiyi8.com/sc/24054.html" >http://www.huiyi8.com/sc/24054.html
<div id= "Progress" ><span> </span></div>
</body>
Simple progress bar control written by Javascript jquery CSS