当前页面: 开发资料首页 → Javascript 专题 → 模拟windows control的进度条
模拟windows control的进度条
摘要: 模拟windows control的进度条
<head>
<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
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
var max = this.max;
var min = this.min;
var e = document.all(this.xyProgressID);
if(pPosition
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>
</body>
↑返回目录
前一篇: 使用Shell.Application技术之二
后一篇: 双向链表&