Home » JavaScript Library

[Js]Piecon

範例 1
沒錯!只要 600 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

piecon-0

Piecon 一樣是利用 HTML5Canvas 來動態產生一個圓餅圖圖示,同時將它指定成 Shortcut icon,並當進度執行完後再還原成網站預設的圖示。

另外要注意的是,目前只有在 ChromeFirefoxOpera 中才能正常顯示圓餅圖,其它的頂多顯示百分比內容。且網站得有一個 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>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響