以前沒寫過jquery插件，在開發這個時，寫一下代碼，又看一下jquery插件的定義（如何開發之類的東東），來來去去的。

????? 之所以要寫這個插件，主要是為了往后的項目中方便實現這類型的功能，在之前做問卷調查那個應用中，就用到這個來顯示結果，但當時開發時并不用是插件的，一大堆代碼，看也煩，用起來很麻煩（當時就調了一個上午）。

還好，這個功能比較簡單，正好合適新手寫插件。

具體的效果如圖：

這個也算是簡單的比例圖吧。

插件的具體的代碼如下：

1 ; (function ($) { 2 $.fn.percentbar = function (o) { 3 var options1 = $.extend({ 4 percent:[],//比例數組，如：[0.5,0.4,0.6] 長度大于1時，按順序發配比例 5 bar_bgcolor:'#EFEFEF',//色彩條的背景顏色 6 bar_bordercolor:'#E2E2E2',//色彩條的邊框顏色 7 bar_borderwidth:1,//色彩條的邊框寬度 8 width:250,//色彩條的寬度 9 height:14,//色彩條的高度 10 callback:function(){}//l回調函數（色彩條顯示完后） 11 },o); 12 var g=this.length; 13 var styleData=InitColor(); 14 $(this).css({ "background": "none repeat scroll 0 0 #EFEFEF", "border": "1px solid #E2E2E2" ,"height": options1.height+"px","width": options1.width+"px","background-color":options1.bar_bgcolor,"border-color":options1.bar_bordercolor,"border-width":options1.bar_borderwidth+"px"}); 15 $(this).each(function(index, element) { 16 $(element).append(" <p style=\"float: left; margin: 0;padding: 0;\"><span style=\"float: left;height: "+options1.height+"px;overflow: hidden;background-color:"+styleData[index]+";width:0px\"></span></p>"); 17 if(g==index+1) 18 { 19 $(element).find("span").animate({ width: Math.round(options1.percent[index] * options1.width) }, "slow",options1.callback) 20 }else 21 { 22 $(element).find("span").animate({ width: Math.round(options1.percent[index] * options1.width) }, "slow") 23 } 24 25 }); 26 27 //初始化色彩條 28 function InitColor() { 29 var o = []; 30 var n = ["#5dbc5b", "#6c81b6", "#9eb5f0", "#a5cbd6", "#aee7f8", "#c2f263", "#d843b3", "#d8e929", "#e58652", "#e7ab6d", "#ee335f", "#fbe096", "#ffc535"]; 31 var q = n.slice(); 32 for (var p = 0, l = g; p < l; p++) { 33 var k = Math.floor(Math.random() * q.length); 34 o.push(q[k]); 35 q.splice(k, 1); 36 if (q.length == 0) { 37 q = n.slice() 38 } 39 } 40 return o 41 } 42 43 44 } 45 })(jQuery);

????? 本來想把css獨立出來的，但最后還是直接出到jquery插件里了，這樣使用起來更加方便的說。

例：

????? $(".good").percentbar({ percent: [0.5, 0.4], width: 500 });??

<div class=".good"><div> <div class=".good"><div> 方法參數說明：

?percent:比例數組（占的比例），如：[0.5,0.4,0.6] 長度大于1時，按順序發配比例
??bar_bgcolor:色彩條的背景顏色
??bar_bordercolor:色彩條的邊框顏色
??bar_borderwidth:色彩條的邊框寬度
??width:色彩條的寬度
??height:色彩條的高度
??callback:回調函數（色彩條顯示完后）

?

轉載于:https://www.cnblogs.com/mission/archive/2012/09/14/PercentBar.html

總結

以上是生活随笔為你收集整理的（jquery插件）打造百分比动态色彩条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。