当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 模拟windows control的进度条

Javascript
Jquery 基础学习笔记
javascript 进度条的几种方法
Jquery中的offset()和position()深入剖析
基于Jquery 好友选择器V2.0
AJAX 仿EXCEL表格功能
网页和浏览器兼容性问题汇总(draft1)
JAVASCRIPT 点击显示 隐藏层
jQuery 学习 几种常用方法
JavaScript 动态改变图片大小
javascript 树控件 比较好用
Javascript Tab 导航插件 (23个)
JavaScript talbe表中指定位置插入一行的实现代码 修正版
js 操作css实现代码
Javascript 错误处理的几种方法
FireFox JavaScript全局Event对象
jquery.alert 弹出式复选框实现代码
jQuery Ajax文件上传(php)
jquery 上下滚动广告
JS 拼图游戏 面向对象，注释完整。
javascript 控制图片播放代码

No. « 220 221 222 223 »

技术文章搜索

关键字

Javascript 中的 模拟windows control的进度条

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-10   浏览: 219 ::
收藏到网摘: n/a

<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>