jquery knob 实际上是 canvas

基本用法 html控制

<input class="knob" value="35">

<input class="knob" data-width="100" data-height="100" data-displayInput="false" value="100" data-thickness=".6" data-fgColor="#c00"  data-bgColor="#666" >

<input class="knob" value="280" data-min="0" data-max="1000" data-step="10" data-cursor="true" data-fgColor="rgb(64,175,94)">

javascript 控制

部分 js

var timer=null;
var i=0;

timer=setInterval(function(){
    if(i<=100){
        knob2.val(i).trigger('change');
        var num=Math.floor(i/25);//轮换4个绿色，最终黑色
        knob2.trigger('configure',{
            fgColor:num<4?gs.getColor('greenPower',num):'#333'
        });
        knob2.css({color:'rgba(66,66,66,'+i/100+')'});
        knob2.val(i+'%');
        i+=1;
    }else{
        clearInterval(timer);
    }
}
,100);

Context

• this.g : canvas context 2D (see Canvas documentation)
• this.$ : jQuery wrapped element
• this.o : options
• this.i : input