一个已封装好的漂亮进度条_Javascript教程-查字典教程网

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

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

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

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

复制代码代码如下:

<body>

<inputtype="button"value="start"onclick="processBar.changeMode();if(processBar.isMoving){this.value='Stop';}else{this.value='Start';}">

</body>

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需刷新才能执行]