一个已封装好的漂亮进度条

时间：2021-05-25





复制代码 代码如下:
<body>
<inputtype="button"value="start"onclick="processBar.changeMode();if(processBar.isMoving){this.value='Stop';}else{this.value='Start';}">

</body>
<script>
document.execCommand("BackgroundImageCache",false,true);

functionProcessBar(){
this.width=256;
this.height=18;
this.top=0;
this.left=0;
this.backImg="process_back.gif";
this.foreImg="process.gif";
this.backDiv=document.createElement("div");
this.foreDiv=document.createElement("div");
this.fontDiv=document.createElement("div");

this.isMoving=false;
this.nowLength=0;
this.moveInterval=100;
this.moveRange=1;
this.timer;

ProcessBar.nowObj=this;

this.init=function(){
this.foreDiv.style.backgroundImage="url("+this.foreImg+")";
this.foreDiv.style.backgroundRepeat="no-repeat";
this.foreDiv.style.position="absolute";
this.foreDiv.style.width=this.nowLength;
this.foreDiv.style.height=this.height;
this.foreDiv.style.top=0;
this.foreDiv.style.left=0;

this.fontDiv.style.background="transparent";
this.fontDiv.style.position="absolute";
this.fontDiv.style.width=this.width;
this.fontDiv.style.height=this.height;
this.fontDiv.style.top=2;
this.fontDiv.style.left=0;
this.fontDiv.style.textAlign="center";
this.fontDiv.style.fontSize="13px";
this.fontDiv.appendChild(document.createTextNode(""));

this.backDiv.style.backgroundImage="url("+this.backImg+")";
this.backDiv.style.backgroundRepeat="no-repeat";
this.backDiv.style.position="absolute";
this.backDiv.style.width=this.width;
this.backDiv.style.height=this.height;
this.backDiv.style.top=this.top;
this.backDiv.style.left=this.left;

this.backDiv.appendChild(this.foreDiv);
this.backDiv.appendChild(this.fontDiv);

document.body.appendChild(this.backDiv);
}

this.changeMode=function(){
this.isMoving=!this.isMoving;

if(this.isMoving){
this.timer=window.setInterval(ProcessBar.nowObj.moving,this.moveInterval);
}else{
window.clearInterval(this.timer);
}
}

this.moving=function(){
ProcessBar.nowObj.nowLength+=ProcessBar.nowObj.moveRange;
ProcessBar.nowObj.foreDiv.style.width=ProcessBar.nowObj.nowLength;

ProcessBar.nowObj.fontDiv.firstChild.data=Math.ceil((ProcessBar.nowObj.nowLength/ProcessBar.nowObj.width)*100)+"%";

if(ProcessBar.nowObj.nowLength>=ProcessBar.nowObj.width){
window.clearInterval(ProcessBar.nowObj.timer);
ProcessBar.nowObj.fontDiv.firstChild.data="Complete!";
}
}


}

varprocessBar=newProcessBar();
processBar.backImg="/upload/2007415102314868.gif"; processBar.foreImg="/upload/2007415102319734.gif"; processBar.top=100;
processBar.left=20;
processBar.init();
</script>


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章