繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 模拟windows control的进度条
- Javascript
- IE与firefox下Dhtml的一些区别小结
- jQuery Selectors(选择器)的使用(一、基本篇)
- jQuery Selectors(选择器)的使用(二、层次篇)
- jQuery 跨域访问问题解决方法
- jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
- javascript 面向对象全新理练之数据的封装
- javascript 面向对象全新理练之继承与多态
- javascript 面向对象全新理练之原型继承
- JavaScript 生成随机数并自动大小排序
- JavaScript利用split函数按规定截取字符串(获取邮箱用户名)
- JavaScript 双级下拉菜单实现代码
- JavaScript split()使用方法与示例
- 33种Javascript 表格排序控件收集
- js 屏蔽鼠标右键脚本附破解方法
- javascript json 新手入门文档
- jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇)
- javascript KeyDown、KeyPress和KeyUp事件的区别与联系
- javascript 汉字转拼音实现代码
- javascript 跳转代码集合
- JavaScript 申明函数的三种方法 每个函数就是一个对象（一）
Javascript 中的 模拟windows control的进度条
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-08-10 浏览: 171 ::
收藏到网摘: 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>
评论 (0) All
