JavaScript实现进度条

来源：互联网发布：h5 双屏互动源码编辑：程序博客网时间：2024/06/09 14:27

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<TITLE>JavaScript进度条</TITLE>

function xyProgressLG(xyID){

this.xyProgressID = 'oProgress' + Math.random().toString().substr(2, 10) + xyID;

this.max = 0;

this.min = 0;

this.width = 100;

this.height = 20;

this.currPos = 0;

this.outerBorderColor = "black";

this.outerBackColor = "white";

this.innerBorderColor = "";

this.innerBackColor = "blue";

this.TextColor = "red";

this.SetProgressTop = xySetProgressTop;

this.SetProgressLeft = xySetProgressLeft;

this.SetProgressWidth = xySetProgressWidth;

this.SetProgressHeight = xySetProgressHeight;

this.SetProgressBorderColor = xySetProgressBorderColor;

this.SetProgressForeBorderColor = xySetProgressForeBorderColor;

this.SetProgressBackColor = xySetProgressBackColor;

this.SetProgressForeColor = xySetProgressForeColor;

this.EnableProgressText = xyEnableProgressText;

this.SetProgressTextFontSize = xySetProgressTextFontSize;

this.SetProgressTextFontColor = xySetProgressTextFontColor;

this.SetProgressTextFontFamily = xySetProgressTextFontFamily;

this.SetProgressMax = xySetProgressMax;

this.SetProgressMin = xySetProgressMin;

this.UpdatePosition = xyUpdatePosition;

this.UpdateToPosition = xyUpdateToPosition;

this.UpdatePersent = xyUpdatePersent;

this.UpdateToPersent = xyUpdateToPersent;

xyProgressInit(this.xyProgressID);

return this.xyProgressID;

}

function xyProgressInit(xyID){

var div = document.createElement("div");

div.id = xyID;

div.style.position = "absolute";

div.style.left = "100px";

div.style.top = "100px";

document.body.appendChild(div);

var pro = document.createElement("div");

pro.style.position = "absolute";

pro.style.left = "0px";

pro.style.top = "0px";

pro.style.fontSize= "0px";

pro.style.width = "100px";

pro.style.height = "20px";

pro.style.border = "1px solid black";

pro.style.background = "white";

pro.style.zIndex = "100";

div.appendChild(pro);

var proInner = document.createElement("div");

proInner.id = xyID+"_Inner";

proInner.style.position = "absolute";

proInner.style.left = "1px";

proInner.style.top = "1px";

proInner.style.fontSize= "0px";

proInner.style.width = "0px";

proInner.style.height = "16px";

proInner.style.border = "1px solid black";

proInner.style.background = "blue";

pro.style.zIndex = "102";

pro.appendChild(proInner);

var text = document.createElement("div");

text.style.position = "absolute";

text.style.left = "50px";

text.style.top = "2px";

text.style.fontSize= "11px";

text.style.width = "40px";

text.style.height = "16px";

text.style.zIndex = "103";

div.appendChild(text);

}

function xySetProgressTop(pStyleTop){

try{

var e = document.all(this.xyProgressID);

e.style.top = pStyleTop;

}catch(e){

alert(e.description);

}

function xySetProgressLeft(pStyleLeft){

try{

var e = document.all(this.xyProgressID);

e.style.left = pStyleLeft;

}catch(e){

alert(e.description);

}

function xySetProgressWidth(pWidth){

try{

var e = document.all(this.xyProgressID);

e.style.width = pWidth;

eOuter = e.children(0);

eOuter.style.width = pWidth;

this.width = pWidth;

}catch(e){

alert(e.description);

}

function xySetProgressHeight(pHeight){

try{

var e = document.all(this.xyProgressID);

e.style.height = pHeight;

eOuter = e.children(0);

eInner = e.children(0).children(0);

eOuter.style.height = pHeight;

eInner.style.height = pHeight-4;

this.height = pHeight;

}catch(e){

alert(e.description);

}

function xySetProgressBorderColor(pColor){

try{

var e = document.all(this.xyProgressID);

e = e.children(0);

e.style.border = "1px solid "+pColor;

}catch(e){

alert(e.description);

}

function xySetProgressForeBorderColor(pColor){

try{

var e = document.all(this.xyProgressID);

e = e.children(0).children(0);

e.style.border = "1px solid "+pColor;

}catch(e){

alert(e.description);

}

function xySetProgressBackColor(pColor){

try{

var e = document.all(this.xyProgressID);

e = e.children(0);

e.style.background = pColor;

}catch(e){

alert(e.description);

}

function xySetProgressForeColor(pColor){

try{

var e = document.all(this.xyProgressID);

e = e.children(0).children(0);

e.style.background = pColor;

}catch(e){

alert(e.description);

}

function xyEnableProgressText(bEnable){

try{

var e = document.all(this.xyProgressID);

eText = e.children(1);

if(bEnable){

eText.style.display = "none";

}else{

eText.style.display = "";

}

var pos = e.style.width;

var sel = eText.style.width;

pos = (pos-sel)/2;

eText.style.left = pos;

}catch(e){

alert(e.description);

}

function xySetProgressTextFontSize(pSize){

try{

var e = document.all(this.xyProgressID);

e = e.children(1);

e.style.fontSize = pSize;

}catch(e){

alert(e.description);

}

function xySetProgressTextFontColor(pColor){

try{

var e = document.all(this.xyProgressID);

e = e.children(1);

e.style.fontColor = pColor;

}catch(e){

alert(e.description);

}

function xySetProgressTextFontFamily(pFamily){

try{

var e = document.all(this.xyProgressID);

e = e.children(1);

e.style.fontFamily = pFamily;

}catch(e){

alert(e.description);

}

function xySetProgressMax(pMax){

this.max = pMax;

}

function xySetProgressMin(pMin){

this.min = pMin;

}

function xyUpdatePosition(pPosition){ /*将progress增长或减小pPosition,其中,0<pPersent<max*/

try{

var max = this.max;

var min = this.min;

var e = document.all(this.xyProgressID);

if(pPosition>max){

return -1;

}

var len = this.width;

var pos = this.currPos+(pPosition/(max-min))*len;

eProgress = e.children(0).children(0);

if(pos>=this.width){

eProgress.style.width = this.width-4;

this.currPos = pos;

}else if(pos<=0){

eProgress.style.width = 0;

this.currPos = pos;

}else{

eProgress.style.width = pos;

this.currPos = pos;

}

return this.currPos;

}catch(e){

alert(e.description);

return -1;

}

function xyUpdateToPosition(pPosition){ /*将progress更新到pPosition位置,其中,min<pPersent<max*/

try{

var max = this.max;

var min = this.min;

var e = document.all(this.xyProgressID);

if(pPosition<min||pPosition>max){

return -1;

}

var len = this.width;

var pos = ((pPosition-min)/(max-min))*len;

eProgress = e.children(0).children(0);

if(pos>=this.width){

eProgress.style.width = this.width-4;

this.currPos = pos;

}else if(pos<=0){

eProgress.style.width = 0;

this.currPos = pos;

}else{

eProgress.style.width = pos;

this.currPos = pos;

}

return this.currPos;

}catch(e){

alert(e.description);

return -1;

}

function xyUpdatePersent(pPersent){ /*从当前位置增长或减小pPersent%,pPersent大于零:增长,否则,减小*/

try{

var e = document.all(this.xyProgressID);

e = e.children(0).children(0);

var len = this.width;

var pos = this.currPos;

len = len*pPersent/100;

pos += len;

if(pos>this.width||pos<0){

return -1;

}

e.style.width = pos;

this.currPos = pos;

return this.currPos;

}catch(e){

alert(e.description);

return -1;

}

function xyUpdateToPersent(pPersent){ /*从当前位置增长或减小到pPersent%*/

try{

var e = document.all(this.xyProgressID);

e = e.children(0).children(0);

var len = this.width;

var pos = len*pPersent/100;

if(pos>this.width||pos<0){

return -1;

}

e.style.width = pos;

this.currPos = pos;

return this.currPos;

}catch(e){

alert(e.description);

return -1;

}

function xyNewID(){

var d = new Date();

var t = "oDraw_"+d.getTime().toString();

return t;

}

</script>

</HEAD>

var xy = new xyProgressLG("kitty");

xy.SetProgressLeft(200)

xy.SetProgressTop(200);

xy.SetProgressWidth(200)

xy.SetProgressHeight(20)

xy.SetProgressMax(200)

xy.SetProgressMin(50);

</script>

function update(){

xy.UpdatePosition(10)

setTimeout("update()",100);

}

</Script>

<button onclick="xy.UpdateToPersent(20)">update</button>

<button onclick="xy.UpdatePosition(10)">updatePosition</button>

<button onclick="update()">autoUpdate</button>

</BODY>

</HTML>