首选要感谢csdn,因为这套代码是在csdn资源下载页面的那个进度条的基础上修改的,进度条的样式可通过css定义,div对象的创建使用innerHTML, 因为document.createElement("div");会带来内存泄露的问题,虽然这个进度条只占有几k的内存,但是还是把它做的完美些比较好,下面代码中init()方法是必要的,需要在页面初始化的时候初始进度条对象,即window.jtProBar = new syj.ProgressBar.....有了jtProBar 以后就可以通过jtProBar.setPercent来控制进度条的进度条了,例如jtProBar.setPercent(3/100);进度条的状态就为3%, 这个地方只要是小于1的分数即可,例如jtProBar.setPercent(3/278);会按百分比计算显示适当的比例. 下面的代码示例中用到了很多window.xxx 其实这个相当于 在script中定义 全局变量 var xxx= 效果是一样的. <html> <head> <title>进度条</title> <!-- 简单的javascript进度条 作者:孙钰佳 邮箱:sunyujia@yahoo.cn blog:http://blog.csdn.net/sunyujia/ 转载请保留此段注释 --> <style type="text/css"> .bgBar{ background: #FFFFFF; font-family: Arial,Verdana; border: 1px solid #000000; font-size: 17; font-weight: bold; } .bgBar div{ background: #DAECC8; border: 1px solid #FFFFFF; color: #308040; text-align: right; overflow: hidden; } </style> <script type="text/javascript"> /****************************************************************************************/ //下面代码为进度条的封装 if (syj == null) var syj = {}; //进度条,parent进度条的父控件对象,width进度条的宽度,barClass进度条的css,display是否显示进度条 syj.ProgressBar=function(parent, width , barClass, display) { this.parent=parent; this.pixels = width; this.parent.innerHTML="<div/>"; this.outerDIV = this.parent.childNodes[0]; this.outerDIV.innerHTML="<div/>"; this.fillDIV = this.outerDIV.childNodes[0]; this.fillDIV.innerHTML = "0"; this.fillDIV.style.width = "0px"; this.outerDIV.className = barClass; this.outerDIV.style.width = (width + 2) + "px"; this.parent.style.display = display==false?'none':''; } //更新进度条进度 pct的值要介于0和1之间 syj.ProgressBar.prototype.setPercent = function(pct) { var fillPixels; if (pct < 1.0){ fillPixels = Math.round(this.pixels * pct); }else { pct = 1.0; fillPixels = this.pixels; } this.fillDIV.innerHTML = Math.round(100 * pct) + "%"; this.fillDIV.style.width = fillPixels + "px"; } //控制进度条的 显示/隐藏 syj.ProgressBar.prototype.display= function(v){ this.parent.style.display = v==true?'':'none'; } //初始化进度条 function init(){ window.jtProBar = new syj.ProgressBar(document.getElementById("progressBar"), 450 , "bgBar"); } /****************************************************************************************/ //下面代码为演示程序 //开始演示 function startAutoDemo(){ if(window.thread==null) window.thread=window.setInterval("updatePercent()",60); } //停止演示 function stopAutoDemo(){ window.clearInterval(window.thread); window.thread=null; } //演示程序 function updatePercent(){ if(window.count==null)window.count=0; window.count=count%100 jtProBar.setPercent(window.count/100); window.count++; } /****************************************************************************************/ </script> </head> <body onload="init()"> <input type="button" value="100%效果" onclick="window.stop=false;jtProBar.setPercent(1);"/> <input type="button" value="开始自动演示" onclick="startAutoDemo()"/> <input type="button" value="停止自动演示" onclick="stopAutoDemo()"/> <input type="button" value="显示" onclick="jtProBar.display(true)"/> <input type="button" value="隐藏" onclick="jtProBar.display(false)"/> <!-- 进度条的父控件 --> <div id="progressBar"></div> </body></html>
评论