在很多时候,我们得用到倒计进功能,有很多人的方法很搞笑,我也不知道为什么,他们怎么还要去服务器做什么请求什么的,当时看着迷糊所以也没有看下去,其实倒计时很简单,只是有的时候是一个网页中有很多的倒计时,可能会产生冲突,不过,这个不用担心,有了现在这个插件,就一切搞定。

插件名称是jCountdown,肯定又是老外写的,呵呵,因为里面全是英文,插件的应用也很简单,下面是他们的例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$<span style="color: #009900">(</span>document<span style="color: #009900">)</span>.<span style="color: #660066">ready</span><span style="color: #009900">(</span><span style="color: #003366;font-weight: bold">function</span><span style="color: #009900">(</span><span style="color: #009900">)</span> <span style="color: #009900">{</span>
		$<span style="color: #009900">(</span><span style="color: #3366CC">"#time3"</span><span style="color: #009900">)</span>.<span style="color: #660066">countdown</span><span style="color: #009900">(</span><span style="color: #009900">{</span>
		date<span style="color: #339933">:</span> <span style="color: #3366CC">"September 7,2011 17:43:00"</span><span style="color: #339933">,</span> <span style="color: #006600;font-style: italic">//Counting TO a date</span>
		onChange<span style="color: #339933">:</span> <span style="color: #003366;font-weight: bold">function</span><span style="color: #009900">(</span> event<span style="color: #339933">,</span> timer <span style="color: #009900">)</span><span style="color: #009900">{</span>
		<span style="color: #009900">}</span><span style="color: #339933">,</span>
		onComplete<span style="color: #339933">:</span> <span style="color: #003366;font-weight: bold">function</span><span style="color: #009900">(</span> event <span style="color: #009900">)</span><span style="color: #009900">{</span>
			$<span style="color: #009900">(</span><span style="color: #000066;font-weight: bold">this</span><span style="color: #009900">)</span>.<span style="color: #660066">html</span><span style="color: #009900">(</span><span style="color: #3366CC">"Completed"</span><span style="color: #009900">)</span><span style="color: #339933">;</span>
		<span style="color: #009900">}</span><span style="color: #339933">,</span>
		leadingZero<span style="color: #339933">:</span> <span style="color: #003366;font-weight: bold">true</span><span style="color: #339933">,</span>
		direction<span style="color: #339933">:</span> <span style="color: #3366CC">"up"</span>
	<span style="color: #009900">}</span><span style="color: #009900">)</span><span style="color: #339933">;</span>
<span style="color: #009900">}</span><span style="color: #009900">)</span><span style="color: #339933">;</span>
 
<span style="color: #006600;font-style: italic">//#time3是容器的ID ,DATA当然就是时间了,可以尝试一下其它的格式,不过,我是用的标准时间格式转载注明www.chhua.com</span>

为了兼容多个ID容器和方便调用,我自己写了一个小函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<span style="color: #003366;font-weight: bold">function</span> times<span style="color: #009900">(</span>id<span style="color: #339933">,</span>time<span style="color: #009900">)</span><span style="color: #009900">{</span>
	<span style="color: #006600;font-style: italic">//#time3是容器的ID ,DATA当然就是时间了</span>
	$<span style="color: #009900">(</span>document<span style="color: #009900">)</span>.<span style="color: #660066">ready</span><span style="color: #009900">(</span><span style="color: #003366;font-weight: bold">function</span><span style="color: #009900">(</span><span style="color: #009900">)</span> <span style="color: #009900">{</span>
		$<span style="color: #009900">(</span><span style="color: #3366CC">"#"</span><span style="color: #339933">+</span>id<span style="color: #009900">)</span>.<span style="color: #660066">countdown</span><span style="color: #009900">(</span><span style="color: #009900">{</span>
		date<span style="color: #339933">:</span>time<span style="color: #339933">,</span> <span style="color: #006600;font-style: italic">//Counting TO a date</span>
		onChange<span style="color: #339933">:</span> <span style="color: #003366;font-weight: bold">function</span><span style="color: #009900">(</span> event<span style="color: #339933">,</span> timer <span style="color: #009900">)</span><span style="color: #009900">{</span>
		<span style="color: #009900">}</span><span style="color: #339933">,</span>
		onComplete<span style="color: #339933">:</span> <span style="color: #003366;font-weight: bold">function</span><span style="color: #009900">(</span> event <span style="color: #009900">)</span><span style="color: #009900">{</span>
			$<span style="color: #009900">(</span><span style="color: #000066;font-weight: bold">this</span><span style="color: #009900">)</span>.<span style="color: #660066">html</span><span style="color: #009900">(</span><span style="color: #3366CC">"Completed"</span><span style="color: #009900">)</span><span style="color: #339933">;</span>
		<span style="color: #009900">}</span><span style="color: #339933">,</span>
		leadingZero<span style="color: #339933">:</span> <span style="color: #003366;font-weight: bold">true</span><span style="color: #339933">,</span>
		direction<span style="color: #339933">:</span> <span style="color: #3366CC">"up"</span>
	<span style="color: #009900">}</span><span style="color: #009900">)</span><span style="color: #339933">;</span>
	<span style="color: #009900">}</span><span style="color: #009900">)</span><span style="color: #339933">;</span>	
	<span style="color: #009900">}</span>

好了,今天就到这里吧,顺便说一下,PR值大更新了,不过我的WEB开发笔记www.chhua.com的没涨,也没降,呵呵,看来,外链还是得要做呀!