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 + -
显示快捷键?