css代码:
.percent{
height:12px;
width:150px;
background-color: #fff;
border: 1px #ddd solid;
}
.inner{
height:12px;
width:100px;
background-color: #00CC00;
}
background-color: #00CC00;
}
js代码如下:
var PercentBar=function(){
}
PercentBar.prototype={
/**
*这是一个百分比显示条,可以显示现在的数值状况,而且有三种颜色,不同的值的时候有不同的颜色,平滑变化
*/
value:0,
inner_ele:null,
outer_ele:null,
text_ele:null,
init:function(config){
this.options={
color_arr:["#FF4A4A","#FFFF4A","#3FDB3F"],//三种颜色,分别表示低中高三种状态
text_arr:["网络信号差","网络信号一般","网络信号好"],
back_color:"#fff",//背景颜色
width:150,
height:12,
border_color:"#ddd",
container_id:"percent",
id:"percentbar",//生成的结构的id
max_value:150
}
mixin(this.options,config);
this.createHtml();
},
createHtml:function(){
var outer=document.createElement("div");
outer.id=this.options.id;
var inner=document.createElement("div");
inner.style.height=this.options.height+"px",
inner.style.width="0px",
inner.style.backgroundColor=this.options.color_arr[0]
outer.appendChild(inner);
this.inner_ele=inner;
Dom.get(this.options.container_id).appendChild(outer);
outer.style.height=this.options.height+"px",
outer.style.width=this.options.width+"px",
outer.style.backgroundColor=this.options.back_color,
outer.style.border= "1px "+this.options.border_color+" solid"
this.outer_ele=outer;
var text=document.createElement("div");
text.style.height=(this.options.height+10)+"px",
text.style.width=this.options.width+"px",
text.style.backgroundColor=this.options.back_color,
text.style.border= "1px "+this.options.border_color+" solid"
text.style.textAlign="center";
text.style.lineHeight=(this.options.height+10)+"px"
this.text_ele=text;
Dom.get(this.options.container_id).appendChild(text);
},
update:function(num){
var ani=new YAHOO.util.Anim(this.inner_ele, {width:{to:(num/this.options.max_value)*this.options.width}},1);
ani.onTween.subscribe(function(s, o,handle) {
handle.value=handle.inner_ele.style.width.replace("px","")*1
var color=""
var text=""
var num=handle.value;
var num2=handle.options.width/3;
if(num<=num2){
color=handle.options.color_arr[0]
text=handle.options.text_arr[0]
}else if(num>num2&&num<=num2*2){
color=handle.options.color_arr[1]
text=handle.options.text_arr[1]
}else{
color=handle.options.color_arr[2]
text=handle.options.text_arr[2]
}
handle.text_ele.innerHTML=text;
handle.inner_ele.style.backgroundColor=color;
},this)
ani.animate();
}
}