Piecon 一樣是利用 HTML5 的 Canvas 來動態產生一個圓餅圖圖示，同時將它指定成 Shortcut icon，並當進度執行完後再還原成網站預設的圖示。
另外要注意的是，目前只有在 Chrome、Firefox 及 Opera 中才能正常顯示圓餅圖，其它的頂多顯示百分比內容。且網站得有一個 Shortcut icon 才能正常執行！
套件名稱：Piecon
套件版本：N/A
作者網站：http://lipka.github.io/piecon/
發佈日期：2013-03-26
檔案大小：2.19 KB
檔案下載：piecon.min.js
參數選項說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | color(選填) 描述： 圓餅圖的填滿顏色 預設值： '#ff0084' background(選填) 描述： 圓餅圖的背景顏色 預設值： '#bbb' shadow(選填) 描述： 圓餅圖的邊框顏色 預設值： '#fff' fallback(選填) 描述： 是否只輸出百分比內容; 允許的值有 true, false 及 'force'(會有圓餅圖及百分比) 預設值： false |
方法說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 | // 設定 Pircon 參數 Piecon.setOptions(custom); // 設定圓餅圖百分比 Piecon.setProgress(percentage); // 還原 favicon.ico Piecon.reset(); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <link rel="shortcut icon" href="favicon.ico" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="piecon.min.js"></script> <script type="text/javascript"> $(function(){ var count = 0; // 設定填滿顏色為 #000, 背景顏色為 #fff, 邊框顏色為 #f00, 並強制輸出進度 Piecon.setOptions({ color: '#000', background: '#fff', shadow: '#f00', fallback: 'force' }); // 產生 1~100 的選項 var optionHtml = ''; for(var i=0;i<101;i++){ optionHtml += '<option>' + i + '</option>'; } // 將選項加入到 select, 並將選取的值指定給 Piecon $('select').html(optionHtml).change(function(){ clearInterval(timer); count = this.value; Piecon.setProgress(count); timer = setInterval(update, 250) }); // 用來更新 Piecon 用 function update(){ if(++count > 100) { Piecon.reset(); clearInterval(timer); return false; } Piecon.setProgress(count); } // 每隔 250ms 執行一次 var timer = setInterval(update, 250); }); </script> <body> <label>設定 %:</label> <select></select> </body> |