仿jquery ui progressbar,div自動轉進度條

最終對象暴露版：

  /**
   * 仿jquery ui progressbar,div自動轉進度條
   * 使用：引入本插件
   */
  ;(function($) {
      /**
       * 進度條構造
       * 
 調用：
 
  <div id="myprogressbarxxx" style="height:20px;width:100px;"></div>
  
 $( function() {
    $("#myprogressbarxxx").progressbar();//初始化進度
    $("#myprogressbarxxx").setProgressbarValue(2);//設置進度比0-100
     var per = $("#myprogressbarxxx").getProgressbarValue();//得到進度值
     alert(per);
  } );
        
  
       */
    var progressbar = function(this_progressbar,options) { 
        return this._init_progressbar(this_progressbar,options);
    };
    $.extend(progressbar.prototype, {
              defaults: {
                    classes: {
                        "ui_progressbar_content": "ui_progressbar_content",
                        "ui_progressbar_percent": "ui_progressbar_percent",
                        "ui_progressbar": "ui_progressbar",            
                        "ui_out_progressbar_percent": "ui_out_progressbar_percent"     
                    },
                    styles:{
                        ui_progressbar_content :{
                        "border": "1px solid #c5c5c5",
                        "background": "#ffffff",
                        "color": "#333333",
                        "display":"inline"
                        },
                        ui_progressbar :{
                            "position":"relative",
                            "height": "100%",
                            "cursor":"pointer",
                            "background": "#e9e9e9",
                            "overflow": "hidden"
                        },
                         ui_progressbar_percent:{
                            "position":"absolute",
                            "right":"3px"
                        },
                        ui_out_progressbar_percent:{
                        }
                    },
                    min: 0,
                    max: 100,
                    value: 0
               },
               //構造html
                _init_progressbar: function(this_progressbar,options) {
                    var options =  $.extend({},this.defaults, options);  
                    
                    var per_info = options.value+"%";
                     var this_ui_progressbar_content = $(this_progressbar).css(options.styles.ui_progressbar_content).attr("title",per_info);
                     var this_ui_progressbar_percent = $("<div>").addClass(options.classes.ui_progressbar_percent).css(options.styles.ui_progressbar_percent).html(per_info);
                     var this_ui_progressbar = $("<div>").addClass(options.classes.ui_progressbar).css(options.styles.ui_progressbar).css({"width":per_info});
                     
                     this_ui_progressbar_percent.appendTo(this_ui_progressbar);
                     this_ui_progressbar.appendTo(this_ui_progressbar_content);
                     
                     
                     return this_ui_progressbar_content;
                }
    });
     //包裝jquery div進度對象
       $.fn.progressbar = $.prototype.progressbar = function(options) {
              return this.each(function() {
                  if (this.tagName. toLowerCase() == "div"){
                       new progressbar(this, options);//要的話存在data中
                  }
              });
       };
       
       /**
        * jquery 設置/得到進度值
        * 
        * 調用：
        *  $("#myprogressbarxxx").setProgressbarValue(2);//設置進度比0-100
        *   var per = $("#myprogressbarxxx").getProgressbarValue();//得到進度值
            alert(per);
        * 
        */
     $.fn.extend({
           //設置進度值
            'setProgressbarValue':function(value){
                     if(value > 100){
                        value = 100;
                     }
                    var per_info = value+"%";
                    $(this).attr("title",per_info);
                    $(this).find("."+progressbar.prototype.defaults.classes.ui_progressbar_percent).html(per_info);
                    $(this).find("."+progressbar.prototype.defaults.classes.ui_progressbar).css({"width":per_info});
                    $(this).next("."+progressbar.prototype.defaults.classes.ui_out_progressbar_percent).html(per_info);
            },
            //得到進度值
            'getProgressbarValue':function(value){
                 return $(this).attr("title");
            }
     });
     
       /**
        * 精確計算
        */
        var MY_MATH = {
               //除法
               _accDiv:function(arg1, arg2) {
                    var t1 = 0, t2 = 0, r1, r2;
                    try {
                        t1 = arg1.toString().split(".")[1].length;
                    }
                    catch (e) {
                    }
                    try {
                        t2 = arg2.toString().split(".")[1].length;
                    }
                    catch (e) {
                    }
                    with (Math) {
                        r1 = Number(arg1.toString().replace(".", ""));
                        r2 = Number(arg2.toString().replace(".", ""));
                        return (r1 / r2) * pow(10, t2 - t1);
                    }
                } 
       };
       
       /**
        * 1.得到進度條html 
        * 2.啓動進度條
        * 
        * 調用：
        * var my_progressbar_operator  = new $.my_progressbar_operator ();
        * var html = my_progressbar_operator.getProgressBarInstance({});
        * my_progressbar_operator.startProgressBar({"id":"xx"});
        * 
        */
       $.my_progressbar_operator = function(options) {  };
        $.extend($.my_progressbar_operator.prototype, {
                //數據類型
                __getClass :function(object){
                    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
                },
                //css對象轉style串
                _getStyleStr : function(item){
                    var styleStr = '';
                      if(this.__getClass(item) == 'Object'){
                          for ( var p in item ){ 
                             var objVal = item[p];
                             styleStr += p + ":" +objVal + ";";
                         }
                     }
                     return styleStr;
                },
                /**
                 * 構建progressbar html
                 * 
                 * 參數說明：
                    {
                               id:"",//進度id(必須指定)
                               value: 0,//進度完成比例(可覆蓋)
                               styles:{
                                     width:"200px",//進度條寬(可覆蓋)
                                    height:"20px"//進圖調高度(可覆蓋)
                               }
                    };
                 */
                _construct_progressbar_html:function(outer_options){
                    var defaults = progressbar.prototype.defaults;
                    var $this_ui_progressbar_content = $.extend(defaults.styles.ui_progressbar_content, outer_options.styles);  
                    var ui_progressbar_content_style = this._getStyleStr($this_ui_progressbar_content);
                    var ui_progressbar_percent_style = this._getStyleStr(defaults.styles.ui_progressbar_percent);
                    var ui_progressbar_style = this._getStyleStr(defaults.styles.ui_progressbar);
                       
                       var pro_html = '<div class="'+defaults.classes.ui_progressbar_content+'" id= "'+outer_options.id+'" title="'+outer_options.value+'%" style="'+ui_progressbar_content_style+'">';
                                pro_html += '<div class="'+defaults.classes.ui_progressbar+'" style="'+ui_progressbar_style+'width:'+outer_options.value+'%">';
                                    pro_html += '<div class="'+defaults.classes.ui_progressbar_percent+'" style="'+ui_progressbar_percent_style+'">'+outer_options.value+'%</div>';
                                pro_html += '</div>';
                            pro_html += '</div>';
                            pro_html += '<span class="'+defaults.classes.ui_out_progressbar_percent+'">'+outer_options.value+'%</span>';
                             console.info("pro_html is:"+pro_html);
                       return pro_html;
                },
            /**
             * 構造進度html
             * 
                參數說明：
                 defaults = {
                               id:"",//進度id(必須)
                               value: 0,//進度完成比例(可覆蓋)
                               styles:{
                                     width:"200px",//進度條寬(可覆蓋)
                                    height:"20px"//進圖調高度(可覆蓋)
                               }
                    };
                 * 
                 */
            getProgressBarInstance:function(options){
                var defaults = {
                           id:"",
                           value: 0,
                           styles:{
                                 width:"200px",
                                height:"20px"
                           }
                };
                var options =  $.extend({},defaults, options);  
                if(!options.id){
                       alert("init progress need args : id !");
                       return "";
                }
                return this._construct_progressbar_html(options);
            },
            /**
             * 開啓進度
             * 
             * 參數說明：
                 defaults = {
                                 id:"",//進度id(必須)
                               start_value: 0,//起始值(可覆蓋)
                               end_value:100,//完成值(可覆蓋)
                               time_cost:10//耗時(s)(可覆蓋)
                    };
             */
            startProgressBar: function (options){
                    var defaults = {
                               id:"",
                               start_value: 0,
                               end_value:100,
                               time_cost:10
                    };
                     var options =  $.extend({},defaults, options);  
                     if(!options.id){
                           alert("startProgressBar need args : id !");
                           return;
                    }
                     var distance_value = options.end_value - options.start_value;
                     var increase_per = MY_MATH._accDiv(distance_value,options.time_cost);//每秒的增量
                     
                     var progress_init = options.start_value;//起始值
                     var interval_temp = setInterval(function(){
                        //
                         if(progress_init >= 100){
                                  if(interval_temp){
                                      window.clearInterval(interval_temp);
                                  }
                                  progress_init  = 100;
                              }else{
                                  progress_init = progress_init + increase_per;
                              }
                           $("#"+options.id).setProgressbarValue(progress_init);//設置進度
                           console.info("progress bar id:"+progress_init+" is:"+progress_init);
                         //
                     },1000);
                }
        });
       
})(jQuery);
 

 

下面是其餘進度版： 

/**
   * 仿jquery ui progressbar,div自動轉進度條
   * 使用：引入本插件
   * 調用示例：
   * 
 $( function() {
    $("#myprogressbarxxx").progressbar();//初始化進度
    $("#myprogressbarxxx").setProgressbarValue(2);//設置進度比0-100
     var per = $("#myprogressbarxxx").getProgressbarValue();//得到進度值
     alert(per);
  } );
  
        頁面(自定義height/width)：
        
  <div id="myprogressbarxxx" style="height:20px;width:100px;"></div>
  
   */
  ;(function($) {
    //init progressbar
    $.progressbar = function(this_progressbar,options) { 
        debugger;
        return this.init_progressbar(this_progressbar,options);
    };
    $.extend($.progressbar.prototype, {
              defaults: {
                    classes: {
                        "ui_progressbar_content": "ui_progressbar_content",
                        "ui_progressbar_percent": "ui_progressbar_percent",
                        "ui_progressbar": "ui_progressbar",            
                        "ui_out_progressbar_percent": "ui_out_progressbar_percent"     
                    },
                    styles:{
                        ui_progressbar_content :{
                        "border": "1px solid #c5c5c5",
                        "background": "#ffffff",
                        "color": "#333333",
                        "display":"inline"
                        },
                        ui_progressbar :{
                            "position":"relative",
                            "height": "100%",
                            "cursor":"pointer",
                            "background": "#e9e9e9",
                            "overflow": "hidden"
                        },
                         ui_progressbar_percent:{
                            "position":"absolute",
                            "right":"3px"
                        },
                        ui_out_progressbar_percent:{
                        }
                    },
                    min: 0,
                    max: 100,
                    value: 0
               },
               //構造元素（這個瀏覽器不一樣，兼容性不穩定）
                init_progressbar_element: function(this_progressbar,options) {
                    var options =  $.extend({},this.defaults, options);  
                    var per_info = options.value+"%";
                     var this_ui_progressbar_content = $(this_progressbar).css(options.styles.ui_progressbar_content).attr("title",per_info);
                     var this_ui_progressbar_percent = $("<div>").addClass(options.classes.ui_progressbar_percent).css(options.styles.ui_progressbar_percent).html(per_info);
                     var this_ui_progressbar = $("<div>").addClass(options.classes.ui_progressbar).css(options.styles.ui_progressbar).css({"width":per_info});
                     
                     this_ui_progressbar_percent.appendTo(this_ui_progressbar);
                     this_ui_progressbar.appendTo(this_ui_progressbar_content);
                     return this_ui_progressbar_content;
                },
               //構造html
                init_progressbar: function(this_progressbar,options) {
                    var options =  $.extend({},this.defaults, options);  
                    var per_info = options.value+"%";
                     var this_ui_progressbar_content = $(this_progressbar).css(options.styles.ui_progressbar_content).attr("title",per_info);
                     var this_ui_progressbar_percent = $("<div>").addClass(options.classes.ui_progressbar_percent).css(options.styles.ui_progressbar_percent).html(per_info);
                     var this_ui_progressbar = $("<div>").addClass(options.classes.ui_progressbar).css(options.styles.ui_progressbar).css({"width":per_info});
                     
                     this_ui_progressbar_percent.appendTo(this_ui_progressbar);
                     this_ui_progressbar.appendTo(this_ui_progressbar_content);
                     return this_ui_progressbar_content;
                },
                //數據類型
                __getClass :function(object){
                    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
                },
                //css對象轉style串
                _getStyleStr : function(item){
                    var styleStr = '';
                      if(this.__getClass(item) == 'Object'){
                          for ( var p in item ){ 
                             var objVal = item[p];
                             styleStr += p + ":" +objVal + ";";
                         }
                     }
                     return styleStr;
                },
                //構建progressbar html
                /**
                 * 參數說明：
                    {
                               id:"",//進度id(必須指定)
                               value: 0,//進度完成比例(可覆蓋)
                               styles:{
                                     width:"200px",//進度條寬(可覆蓋)
                                    height:"20px"//進圖調高度(可覆蓋)
                               }
                    };
                 */
                construct_progressbar_html:function(outer_options){
                    debugger;
                    var $this_ui_progressbar_content = $.extend(this.defaults.styles.ui_progressbar_content, outer_options.styles);  
                    var ui_progressbar_content_style = this._getStyleStr($this_ui_progressbar_content);
                    var ui_progressbar_percent_style = this._getStyleStr(this.defaults.styles.ui_progressbar_percent);
                    var ui_progressbar_style = this._getStyleStr(this.defaults.styles.ui_progressbar);
                       
                       var pro_html = '<div class="'+this.defaults.classes.ui_progressbar_content+'" id= "'+outer_options.id+'" title="'+outer_options.value+'%" style="'+ui_progressbar_content_style+'">';
                                pro_html += '<div class="'+this.defaults.classes.ui_progressbar+'" style="'+ui_progressbar_style+'width:'+outer_options.value+'%">';
                                    pro_html += '<div class="'+this.defaults.classes.ui_progressbar_percent+'" style="'+ui_progressbar_percent_style+'">'+outer_options.value+'%</div>';
                                pro_html += '</div>';
                            pro_html += '</div>';
                            pro_html += '<span class="'+this.defaults.classes.ui_out_progressbar_percent+'">'+outer_options.value+'%</span>';
                       return pro_html;
                }
    });
    //暴露公共方法
     $.fn.extend({
           //設置進度值
            'setProgressbarValue':function(value){
                     if(value > 100){
                        value = 100;
                     }
                    var per_info = value+"%";
                    $(this).attr("title",per_info);
                    $(this).find("."+$.progressbar.prototype.defaults.classes.ui_progressbar_percent).html(per_info);
                    $(this).find("."+$.progressbar.prototype.defaults.classes.ui_progressbar).css({"width":per_info});
                    $(this).next("."+$.progressbar.prototype.defaults.classes.ui_out_progressbar_percent).html(per_info);
            },
            //得到進度值
            'getProgressbarValue':function(value){
                 return $(this).attr("title");
            }
     });
     
       $.fn.progressbar = $.prototype.progressbar = function(options) {
              return this.each(function() {
                  if (this.tagName. toLowerCase() == "div"){
                       new $.progressbar(this, options);//要的話存在data中
                  }
              });
       };
})(jQuery);
  //得到進度實例 FIXME 上面返回對象格式有點問題 
/**
 * 在dialog中顯示進度條時，得到進度條對象html源碼
參數說明：
 defaults = {
               id:"",//進度id(必須指定)
               value: 0,//進度完成比例(可覆蓋)
               styles:{
                     width:"200px",//進度條寬(可覆蓋)
                    height:"20px"//進圖調高度(可覆蓋)
               }
    };
    
dialog中顯示比例：

    var dialogProgressBar1 = "dialogProgressBar1";
    var dialogProgressBar1Html = "<br/>"+getProgressBarInstance({"id":dialogProgressBar1});//得到進度信息
    
    showDragDivHtml({"id":"xx","ui_widget_header_info": "合同基礎信息導入進度詳情","my_ui_widget_content_info":"處理中，請稍好。。。","stable_div":dialogProgressBar1Html});//展現拖拽
    $("#"+dialogProgressBar1).setProgressbarValue(20);//設置進度比0-100
     var per = $("#"+dialogProgressBar1).getProgressbarValue();//得到進度值
     alert(per);
  
 * 
 */
function  getProgressBarInstance(outer_options){
    debugger;
    //必要參數
    this.defaults = {
               id:"",
               value: 0,
               styles:{
                        width:"200px",
                    height:"20px"
               }
    };
    var outer_options =  $.extend({},this.defaults, outer_options);  
    if(!outer_options.id){
           alert("init progress need args : id !");
           return "";
    }
    return $.progressbar.prototype.construct_progressbar_html(outer_options);
}

 

對象封裝方式，版本二：

  /**
   * 仿jquery ui progressbar,div自動轉進度條
   * 使用：引入本插件
   * 調用示例：
   * 
 $( function() {
    $("#myprogressbarxxx").progressbar();//初始化進度
    $("#myprogressbarxxx").setProgressbarValue(2);//設置進度比0-100
     var per = $("#myprogressbarxxx").getProgressbarValue();//得到進度值
     alert(per);
  } );
  
        頁面(自定義height/width)：
        
  <div id="myprogressbarxxx" style="height:20px;width:100px;"></div>
  
   */
  ;(function($) {
      /**
       * 進度條構造
       */
    $.progressbar = function(this_progressbar,options) { 
        return this.init_progressbar(this_progressbar,options);
    };
    $.extend($.progressbar.prototype, {
              defaults: {
                    classes: {
                        "ui_progressbar_content": "ui_progressbar_content",
                        "ui_progressbar_percent": "ui_progressbar_percent",
                        "ui_progressbar": "ui_progressbar",            
                        "ui_out_progressbar_percent": "ui_out_progressbar_percent"     
                    },
                    styles:{
                        ui_progressbar_content :{
                        "border": "1px solid #c5c5c5",
                        "background": "#ffffff",
                        "color": "#333333",
                        "display":"inline"
                        },
                        ui_progressbar :{
                            "position":"relative",
                            "height": "100%",
                            "cursor":"pointer",
                            "background": "#e9e9e9",
                            "overflow": "hidden"
                        },
                         ui_progressbar_percent:{
                            "position":"absolute",
                            "right":"3px"
                        },
                        ui_out_progressbar_percent:{
                        }
                    },
                    min: 0,
                    max: 100,
                    value: 0
               },
               //構造html
                init_progressbar: function(this_progressbar,options) {
                    var options =  $.extend({},this.defaults, options);  
                    var per_info = options.value+"%";
                     var this_ui_progressbar_content = $(this_progressbar).css(options.styles.ui_progressbar_content).attr("title",per_info);
                     var this_ui_progressbar_percent = $("<div>").addClass(options.classes.ui_progressbar_percent).css(options.styles.ui_progressbar_percent).html(per_info);
                     var this_ui_progressbar = $("<div>").addClass(options.classes.ui_progressbar).css(options.styles.ui_progressbar).css({"width":per_info});
                     
                     this_ui_progressbar_percent.appendTo(this_ui_progressbar);
                     this_ui_progressbar.appendTo(this_ui_progressbar_content);
                     return this_ui_progressbar_content;
                },
                //數據類型
                __getClass :function(object){
                    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
                },
                //css對象轉style串
                _getStyleStr : function(item){
                    var styleStr = '';
                      if(this.__getClass(item) == 'Object'){
                          for ( var p in item ){ 
                             var objVal = item[p];
                             styleStr += p + ":" +objVal + ";";
                         }
                     }
                     return styleStr;
                },
                //構建progressbar html
                /**
                 * 參數說明：
                    {
                               id:"",//進度id(必須指定)
                               value: 0,//進度完成比例(可覆蓋)
                               styles:{
                                     width:"200px",//進度條寬(可覆蓋)
                                    height:"20px"//進圖調高度(可覆蓋)
                               }
                    };
                 */
                construct_progressbar_html:function(outer_options){
                    var $this_ui_progressbar_content = $.extend(this.defaults.styles.ui_progressbar_content, outer_options.styles);  
                    var ui_progressbar_content_style = this._getStyleStr($this_ui_progressbar_content);
                    var ui_progressbar_percent_style = this._getStyleStr(this.defaults.styles.ui_progressbar_percent);
                    var ui_progressbar_style = this._getStyleStr(this.defaults.styles.ui_progressbar);
                       
                       var pro_html = '<div class="'+this.defaults.classes.ui_progressbar_content+'" id= "'+outer_options.id+'" title="'+outer_options.value+'%" style="'+ui_progressbar_content_style+'">';
                                pro_html += '<div class="'+this.defaults.classes.ui_progressbar+'" style="'+ui_progressbar_style+'width:'+outer_options.value+'%">';
                                    pro_html += '<div class="'+this.defaults.classes.ui_progressbar_percent+'" style="'+ui_progressbar_percent_style+'">'+outer_options.value+'%</div>';
                                pro_html += '</div>';
                            pro_html += '</div>';
                            pro_html += '<span class="'+this.defaults.classes.ui_out_progressbar_percent+'">'+outer_options.value+'%</span>';
                             console.info("pro_html is:"+pro_html);
                       return pro_html;
                }
    });
    //暴露公共方法
     $.fn.extend({
           //設置進度值
            'setProgressbarValue':function(value){
                     if(value > 100){
                        value = 100;
                     }
                    var per_info = value+"%";
                    $(this).attr("title",per_info);
                    $(this).find("."+$.progressbar.prototype.defaults.classes.ui_progressbar_percent).html(per_info);
                    $(this).find("."+$.progressbar.prototype.defaults.classes.ui_progressbar).css({"width":per_info});
                    $(this).next("."+$.progressbar.prototype.defaults.classes.ui_out_progressbar_percent).html(per_info);
            },
            //得到進度值
            'getProgressbarValue':function(value){
                 return $(this).attr("title");
            }
     });
     
       $.fn.progressbar = $.prototype.progressbar = function(options) {
              return this.each(function() {
                  if (this.tagName. toLowerCase() == "div"){
                       new $.progressbar(this, options);//要的話存在data中
                  }
              });
       };
       
       /**
        * 數學精確計算
        */
        $.my_math = function(options) {}; 
       $.extend($.my_math.prototype, {
                  //除法函數
               accDiv:function(arg1, arg2) {
                    var t1 = 0, t2 = 0, r1, r2;
                    try {
                        t1 = arg1.toString().split(".")[1].length;
                    }
                    catch (e) {
                    }
                    try {
                        t2 = arg2.toString().split(".")[1].length;
                    }
                    catch (e) {
                    }
                    with (Math) {
                        r1 = Number(arg1.toString().replace(".", ""));
                        r2 = Number(arg2.toString().replace(".", ""));
                        return (r1 / r2) * pow(10, t2 - t1);
                    }
                } 
       });
       
       /**
        * 初始化進度條 類方法
        */
       
       $.my_progressbar_oper = function(options) {  };
        $.extend($.my_progressbar_oper.prototype, {
            /**
                 * 在dialog中顯示進度條時，得到進度條對象html源碼
                參數說明：
                 defaults = {
                               id:"",//進度id(必須指定)
                               value: 0,//進度完成比例(可覆蓋)
                               styles:{
                                     width:"200px",//進度條寬(可覆蓋)
                                    height:"20px"//進圖調高度(可覆蓋)
                               }
                    };
                    
                dialog中顯示比例：
                
                    var dialogProgressBar1 = "dialogProgressBar1";
                    var dialogProgressBar1Html = "<br/>"+getProgressBarInstance({"id":dialogProgressBar1});//得到進度信息
                    
                    showDragDivHtml({"id":"xx","ui_widget_header_info": "合同基礎信息導入進度詳情","my_ui_widget_content_info":"處理中，請稍好。。。","stable_div":dialogProgressBar1Html});//展現拖拽
                    $("#"+dialogProgressBar1).setProgressbarValue(20);//設置進度比0-100
                     var per = $("#"+dialogProgressBar1).getProgressbarValue();//得到進度值
                     alert(per);
                  
                 * 
                 */
            getProgressBarInstance:function(options){
                //必要參數
                this.defaults = {
                           id:"",
                           value: 0,
                           styles:{
                                 width:"200px",
                                height:"20px"
                           }
                };
                var options =  $.extend({},this.defaults, options);  
                if(!options.id){
                       alert("init progress need args : id !");
                       return "";
                }
                return $.progressbar.prototype.construct_progressbar_html(options);
            },
            startProgressBar: function (options){
                    defaults = {
                               id:"",//進度id
                               start_value: 0,//起始值
                               end_value:100,//完成值
                               time_cost:10//耗時(s)
                    };
                     var options =  $.extend({},defaults, options);  
                     if(!options.id){
                           alert("startProgressBar need args : id !");
                           return;
                    }
                     var distance_value = options.end_value - options.start_value;
                     var increase_per = $.my_math.prototype.accDiv(distance_value,options.time_cost);//每秒的增量
                     
                     var progress_init = options.start_value;//起始值
                     var interval_temp = setInterval(function(){
                        //
                         if(progress_init >= 100){
                                  if(interval_temp){
                                      window.clearInterval(interval_temp);
                                  }
                                  progress_init  = 100;
                              }else{
                                  progress_init = progress_init + increase_per;
                              }
                           $("#"+options.id).setProgressbarValue(progress_init);//設置進度
                           console.info("progress bar id:"+progress_init+" is:"+progress_init);
                         //
                     },1000);
                }
        });
       
})(jQuery);
 

對象封裝簡化，版本三：