基于jQuery的圆环进度条函数封装详解编程语言

第一次尝试这样封装函数，有不对的地方请大家指正，谢谢！

代码如下：

html部分：

 <div class="div1"> 
 <div class="right-div2"> 
     <div class="right-div3"></div> 
    </div> 
    <div class="left-div2"> 
     <div class="left-div3"></div> 
    </div> 
    <div class="div4"><span>0%</div> 
</div> 
<div class="div2"> 
 <div class="right-div2"> 
     <div class="right-div3"></div> 
    </div> 
    <div class="left-div2"> 
     <div class="left-div3"></div> 
    </div> 
    <div class="div4"><span>0%</div> 
</div>

css部分：

*{ margin:0; padding:0;} 
.div1, .right-div2, .right-div3, .left-div2, .left-div3 { width:200px; height:200px; border-radius:50%;} 
.div1 { background:#ccc; position:relative;} 
.right-div2, .right-div3, .left-div2, .left-div3 { position:absolute; left:0; top:0;} 
.right-div2, .right-div3 { clip:rect(0,auto,auto,100px);} 
.left-div2, .left-div3 { clip:rect(0,100px,auto,auto);} 
.right-div3 { background:#f00; transform:rotate(-180deg);} 
.left-div3 { background:#f00; transform:rotate(-180deg);} 
.div4 { position:absolute; top:25px; left:25px; width:150px; height:150px; line-height:150px; text-align:center; border-radius:50%; background:#fff;} 
.div2 { left:300px; top:0; position:absolute; background:#ccc; width:200px; height:200px; border-radius:50%;}

js部分：

var progress = { 
 //变量 
 per : 0, //0~100 
 per_radian : 0,  //0~360 
 right_div : null, 
 left_div : null, 
 num : null, 
  
 //函数 
 move : function (){ 
  this.per_radian = this.per <= 50 ? this.per*3.6-180 : this.per*3.6-360; 
  if(this.per <= 50){ 
   this.right_div.css('transform','rotate(' + this.per_radian + 'deg)'); 
  }else{ 
   this.right_div.css('transform','rotate(0)'); 
   this.left_div.css('transform','rotate(' + this.per_radian + 'deg)'); 
  } 
  this.num.html(this.per); 
 }, 
  
 /* 
  *初始化 
  *参数1：进度 
  *参数2：右边的旋转对象 
  *参数3：左边的旋转对象 
  *参数4：显示进度的对象 
  */ 
 init : function(per, right, left, num){ 
  this.per = per; 
  this.right_div = right; 
  this.left_div = left; 
  this.num = num; 
  this.move(); 
 } 
}; 
 
//调用 
progress.init(90, $('.div1 .right-div3'), $('.div1 .left-div3'), $('.div1 .div4 span')); 
progress.init(30, $('.div2 .right-div3'), $('.div2 .left-div3'), $('.div2 .div4 span'));