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> |