开发学院网页设计JavaScript 模拟windows control进度条 阅读

模拟windows control进度条

 2007-12-09 10:23:48 来源:WEB开发网   
核心提示: 废话不多说,我们直接进入主题,模拟windows control进度条,模拟windows control进度条,下面以具体代码呈现:<HTML><HEAD><TITLE>xyProgressLG xo</TITLE><script> function x

   废话不多说,我们直接进入主题,模拟windows control进度条,下面以具体代码呈现:

<HTML><HEAD>
<TITLE>xyProgressLG xo</TITLE>
<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>
</HEAD>
<body topmargin=0 id=bodyID>
<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>

技术交流 永无止境

Tags:模拟 windows control

编辑录入:coldstar [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接