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/
- 大小: 6 KB
分享到:
相关推荐
JQuery倒计时插件,效果请看http://www.jq22.com/jquery-info3132
JQuery 倒计时插件:几种数字表的样式,如HTC手机上的数字表。
三种颜色的jquery倒计时插件
jquery倒计时插件 jquery倒计时插件 jquery倒计时插件
简单的jQuery倒计时插件 可以根据自己需求拓展定制
jquery倒计时插件多个倒计时同时计时代码 jquery倒计时插件多个倒计时同时计时代码
简单的jquery倒计时插件.rar
三种颜色的jquery倒计时插件 非常好用的一款JQuery插件
jQuery倒计时插件6种不同倒计时效果代码 jQuery倒计时插件6种不同倒计时效果代码
jquery 倒计时插件 jCountr 实例 jquery 倒计时插件 jCountr 实例
jQuery.countdown是一款功能齐全的jQuery倒计时插件。jQuery.countdown.js一个文件中集合了所有的倒计时功能,它能够显示各种时间格式,并提供回调函数。
jQuery倒计时插件FlipTimer是一款类似日历翻页效果的jQuery网站上线倒计时代码下载。
网络上的Jquery倒计时插件,希望对朋友们有用,来自于网络!
jquery倒计时插件可自定义多个倒计时间展示