Home » jQuery 外掛

[jQ]jquery-counter

[ 日期： | 瀏覽：26,915 | 迴響：22 ]
範例 1
請協助我把這個效果加到我的網站 (只要 900 元)
沒錯!只要 900 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



不知道各位有沒有看過 hTC 在行動裝置上的那個會翻頁的時鐘呢？jquery-counter 雖然目前是一個倒數計時的外掛套件，但作者利用了類似影格的方式來改變圖片，進而產生翻頁的錯覺效果。

套件名稱：jquery-counter
套件網址：N/A
作者網站：http://code.google.com/p/jquery-countdown/
套件網址：N/A
發佈日期：2009-07-10
檔案大小：3.53 KB
檔案下載：jquery.countdown.js

HTML 屬性說明：

檢視原始碼 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

stepTime(選填)
描述： 圖片切換的移動速度(1000毫秒 = 1秒)；如果是使用作者提供的圖片的話，建議不要變更此值
預設值： 60
 
format(選填)
描述： 時間格式
預設值： "dd:hh:mm:ss"
 
startTime(選填)
描述： 要倒數的時間；這邊填入的時間格式要跟 format 的一樣才行
預設值： "01:12:32:55"
 
digitImages(選填)
描述： 每一秒是包含幾格圖片；如果是使用作者提供的圖片的話，建議不要變更此值
預設值： 6
 
digitWidth(選填)
描述： 數字圖片的寬度(以一小格為主)
預設值： 53
 
digitHeight(選填)
描述： 數字圖片的高度(以一小格為主)
預設值： 77
 
timerEnd(選填)
描述： 當時間到了要執行的動作
預設值： function(){}
 
image(選填)
描述： 數字圖片的來源
預設值： "digits.png"

方法說明：

檢視原始碼 JavaScript
1
2

// 在指定的區塊上進行倒數計時效果
$(selector).countdown(userOptions);

使用範例：

檢視原始碼 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<style type="text/css">
	#counter2 {
		margin-top: 50px;
		clear: both;
	}
	.cntSeparator {	/* 分隔符號的樣式 */
		font-size: 54px;
		margin: 10px 7px;
		color: #000;
	}
	.desc {
		margin: 7px 3px;
	}
	.desc div {
		float: left;
		font-family: Arial;
		width: 70px;
		margin-right: 65px;
		font-size: 13px;
		font-weight: bold;
		color: #000;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 第一個倒數計時, 圖片來源為 images/digits.png
		// 倒數時間為 1 天 12 小時又 12 分 0 秒
		$('#counter').countdown({
			image: 'images/digits.png',
			startTime: '01:12:12:00'
		});
 
		// 第二個倒數計時, 圖片來源為 images/digits.png
		// 倒數時間為 1 分 30 秒, 格式為 mm分ss秒
		// 時間到了跳出對話方塊
		$('#counter2').countdown({
			image: 'images/digits.png',
			startTime: '01分30秒',
			timerEnd: function(){
				alert('時間終了!');
			},
			format: 'mm分ss秒'
        });
	});
</script>
 
<body>
	<div id="counter"></div>
	<div class="desc">
		<div>日</div>
		<div>時</div>
		<div>分</div>
		<div>秒</div>
	</div>
 
	<div id="counter2"></div>
	<div class="desc">
		<div>分</div>
		<div>秒</div>
	</div>
</body>
範例 1

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

22 筆針對 [jQ]jquery-counter 的迴響

1 2

  1. 男丁大您好

    不好意思,又來請問問題...

    想請問這邊的 startTime: '01:12:12:00'

    可否設定成抓現在time的時間 到 某個日期的差距時間嗎?

    謝謝男丁大

  2. 男丁大您好

    我是已經有找到類似的程式

    但是 目前有一個問題

    因為startTime後面的日期

    我使用php 或者 js語法 都不知道怎麼變更

    因為他原本是'01分30秒' 之類的

    想詢問 PHP和JS 要怎麼把變數加進去?

    謝謝男丁大

  5. 男丁大你好
    我想問一下為何範例開啟後顯示的時間都會亂跳呢?該如何設定才能正常的每秒往下扣呢?

  6. 男丁大你好:
    請問一下這個插件在IE8的瀏覽器顯示時是不是會亂跳呢?
    因為我用chrome顯示是正常，可是用IE8顯示時數字會亂跳，不知道有沒有方法可以克服這個問題呢?

    • 因為它截字串的方式是在 IE7 及以下不支援的,
      所以要把 options.startTime[i] 改成 options.startTime.substr(i, 1)

1 2

發表迴響