進入網站的加載進度條代碼

css代碼：

         .percent{
              height:12px;
              width:150px;
              background-color: #fff;
              border: 1px #ddd solid;
          }

       .inner{
             height:12px;

            width:100px;
             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();

               }

           }