load3-xyprogresslg xo.htm

来自「javascript编程的组件」· HTM 代码 · 共 335 行

HTM
335
字号
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0048)http://fason.nease.net/code/js/loading/load3.htm -->
<HTML><HEAD><TITLE>xyProgressLG xo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT> 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>

<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY id=bodyID topMargin=0 onload=update()>
<SCRIPT> var xy = new xyProgressLG("kitty"); xy.SetProgressLeft(200) xy.SetProgressTop(200); xy.SetProgressWidth(200) xy.SetProgressHeight(20) xy.SetProgressMax(200) xy.SetProgressMin(50); </SCRIPT>

<SCRIPT language=JavaScript>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>

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?