首选要感谢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>
评论