废话不多说，我们直接进入主题，模拟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>
技术交流 永无止境
中共有相关主题 篇