模拟windows control的进度条
时间： 2021-07-31 作者：daque
<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>
相关推荐
热门阅览
最新排行
- 1 手机如何装windows系统，手机装windows系统教程
- 2 微信公众号重大调整 新公注册公众号将没有留言功能
- 3 烧杯app最剧烈的反应有哪些？ 烧杯app攻略
- 4 微信小程序怎么用 微信小程序使用教程
- 5 360快剪辑怎么使用？360快剪辑图文视频教程
- 6 八分音符外挂神器：绝望中的战斗机
- 7 2017热门微信小程序排行榜 微信小程序二维码大全
- 8 微信聊天记录导出到电脑 怎么在电脑上查看微信聊天记录
- 9 在U递上赚钱和省钱教程 教你在U递上怎么赚钱何省钱
- 10 u递邀请码申请教程 u递邀请码领取方法
- 11 如何解决爱奇艺账号登陆验证 跳过爱奇艺账号手机登录验证方法分享 亲测好用
- 12 手机申请无限制申请QQ靓号 手机怎样无限申请Q号