jQuery倒计时插件

Countdown timer jQuery Plugin 本文以v1.2为例

 

 

这是一个简单易用的倒计时插件，不过默认的例子，在Firefox和IE下边都没有效果，Chrome正常。demo代码如下：

 

$(document).ready(function() {
	
	$("#time").countdown({
		date: "july 1, 2011 19:24",
		onChange: function( event, timer ){
		
			/*
				Tips:
				
				event.target is DOM Element
				this is DOM element
				$(this) is jQuery Element
				timer is interval for countdown
				
				If a countdown should end early you could do:
				
				clearInterval( timer );
				$(this).trigger('complete');
			*/

		},
		onComplete: function( event ){
		
			$(this).html("Completed");
		},
		leadingZero: true
	});

});

 

 

查看插件的源代码，发现问题出在date这个参数的设置，在源代码中使用new Date(opts.date)来创建时间。多次尝试发现，配合Rails使用的时候很方便：

 

    $(document).ready(function() {

      $("#time>").countdown({
        date: "<%= product.end_time.to_formatted_s(:rfc822) %>",
        htmlTemplate: "%{d} <span class=\"small\">天</span> %{h} <span class=\"small\">小时</span> %{m} <span class=\"small\">分钟</span> %{s} <span class=\"small\">秒</span>",
        onComplete: function( event ){
          $(this).html("已结束");
        },
        leadingZero: true
      });

    });

 其中

 

date: "<%= product.end_time.to_formatted_s(:rfc822) %>"

 生成类似

 

date: "Mon, 12 Sep 2011 18:00:00 +0800"

 

 

 

更多插件http://paranimage.com/9-countdown-cool-jquery-plugins-and-tutorials/

 

评论

4 楼 tiroc 2011-11-20  

lc_frog 写道

楼主，浏览器兼容搞定了吗？

我没发现不兼容问题，能不能说下你的浏览器和版本？

3 楼 lc_frog 2011-11-19  

楼主，浏览器兼容搞定了吗？

2 楼 tiroc 2011-11-02  

chen_miao 写道

为什么是加秒的，而不是减秒

我刚才看了一下，现在他们网站上提供的示例中有两个计时：
上边的#time是计算从某个时间期已经过去了多少天
下边的#time2才是倒计时
因为#time2设定的时间为"july 31, 2011"，已经过去了，所以显示Completed.你把它改成"july 31, 2012"就可以看到效果了。

1 楼 chen_miao 2011-11-01  

为什么是加秒的，而不是减秒