基于jquery的百分比动态颜色条插件

我以前没有写过jquery插件。当开发这个的时候，写下代码，看看jquery插件的定义(如何开发这样的东西)。它来来去去。之所以要写这个插件，主要是为了方便在以后的项目中实现这类功能。在之前的问卷调查应用中，我用这个来显示结果。但是，当时我开发的时候，不需要做插件。代码很多，读起来很烦，用起来很麻烦(当时调了一上午)。幸运的是，这个函数比较简单，正好适合初学者编写插件。具体效果如图：

这是一个简单的比例图。插件的具体代码如下：复制代码如下：(函数($) {$。fn . percent bar=function(o){ var options 1=$。extend ({percent: []，//scale数组，例如当[0.5，0.4，0.6]的长度大于1时，依次分布比例条_ bgcolor: ' # efeef '，//背景色条_ bordercolor3360' # e2e2 '，//边框色条_borderwidth:1，//颜色条的边框宽度为3360250，//颜色条的宽度为height:14var g=this.lengthvar style data=InitColor()；$(这个)。css({ 'background': '无重复滚动0 0 #EFEFEF '，' border': '1px实线# E2E2E2 '，' height':选项1.height 'px '，' width':选项1.width 'px '，' background-color ' :选项1.bar_bgcolor，' border-color ' :选项1.bar_borderwidth 'px$(这个)。每个(函数(索引，元素){ $(元素))。追加(' p style=\ '左浮动：margin : 0；padd : 0；\'span style=\ '向左浮动：height : ' options 1 . height ' px；飞越：隐藏；background-color :“style data[index]”；width :0 px \ '/span/p ')；if(g==索引1) { $(元素)。查找(' span ')。animate({ width : Math . round(options 1 . percent[index]* options 1 . width)}，' slow '，options 1 . callback)} else { $(element)。查找(' span ')。动画({ width : Math . round(options 1 . percent[index]* options 1 . width)}，' slow ')})；//初始化颜色条函数InitColor(){ var o=[]；var n=['#5dbc5b '，' #6c81b6 '，' #9eb5f0 '，' #a5cbd6 '，' #aee7f8 '，' #c2f263 '，' #d843b3 '，' #d8e929 '，' #e58652 '，' #e7ab6d '，' #ee335f '，' #fbe096 '，' # ffc 535 ']；var q=n . slice()；for (var p=0，l=g；p . l；p){ var k=math . floor(math . random()* q . length)；o . push(q[k])；q .拼接(k，1)；if(q . length==0){ q=n . slice()} } return o } })(jQuery)；本来想把css分离出来，但最后直接放入jquery插件中，更容易使用。示例：复制代码如下： $('。很好)。percentbar ({percent3360 [0.5，0.4]，宽度： 500 })；Div类='。好的“div div class=”。' good' div Method参数说明：percent:刻度数组(比例)，例如当[0.5，0.4，0.6]的长度大于1时，Order distribution partition bar _ bgcolor :背景色bar_bordercolor:边框色bar_borderwidth:边框宽度颜色bar :宽度颜色bar :高度颜色bar callback:回调函数(显示颜色bar后)。