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/