jQuery Countdown是一个倒计时jQuery插件, jQuery Countdown是一款免费的jQuery倒计时插件,使用非常简单,直接下载源文件拷贝里面的代码到你需要使用的页面,然后自定义倒计时的开始时间即可,缺点是兼容性不是很好,当然只是在像IE6、IE7这样淘汰的浏览器上面不能运行,其它主流浏览器上面还是可以完美运行的。
这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒。倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒计时。
jQuery.Countdown易于更换皮肤。代码使用非常简单,下载源码一看就明白了,一个页面可以有多个倒计时实例,可以停止和开始。
jQuery Countdown使用
1、添加下面的JS代码到你页面的Head标签内
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
2、插入下面的DIV标签到你页面的Body区域
<div id="counter"></div>
3、插入下面重要的自定义配置代码到Head标签内
<script type="text/javascript"> $(function(){ $('#counter').countdown({//counter与Body区域的DIV标签名相同 image: 'images/digits.png',//注意此处图片路径 startTime: '01:12:12:00'//此次自定义倒计时开始时间 }); </script>
4、最后就是插入下面的CSS样式文件即可
.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; }
示例:
Basic coupon site with format N days hr:min:sec
Advance coupon with conditionals and pluralization, format N weeks N days hr:min:sec
Product launch in… (callback style)
Multiple instances on the same page
Calculate the countdown total hours
教程:http://hilios.github.io/jQuery.countdown/examples/advanced-coupon-site.html
GitHub:https://github.com/hilios/jquery.countdown
下载:https://github.com/hilios/jQuery.countdown/releases/download/2.1.0/jquery.countdown-2.1.0.zip