jQuery倒计时（CountDown）小插件
可以用于一个页面多个倒计时，调用也非常方便。
- /*
- jquery.countdown.js
- */
- (function($){
- var countdown = function(item, config)
- {
- var seconds = parseInt($(item).attr(config.attribute));
- var timer = null;
- var doWork = function()
- {
- if(seconds >= 0)
- {
- if(typeof(config.callback) == "function")
- {
- var data = {
- total : seconds ,
- second : Math.floor(seconds % 60) ,
- minute : Math.floor((seconds / 60) % 60) ,
- hour : Math.floor((seconds / 3600) % 24) ,
- day : Math.floor(seconds / 86400)
- };
- config.callback.call(item, seconds, data, item);
- }
- seconds --;
- }else{
- window.clearInterval(timer);
- }
- }
- timer = window.setInterval(doWork, 1000);
- doWork();
- };
- var main = function()
- {
- var args = arguments;
- var config = { attribute : ‘data-seconds‘, callback : null };
- if(args.length == 1)
- {
- if(typeof(args[0]) == "function") config.callback = args[0];
- if(typeof(args[0]) == "object") $.extend(config, args[0]);
- }else{
- config.attribute = args[0];
- config.callback = args[1];
- }
- $(this).each(function(index, item){
- countdown.call(item, item, config);
- });
- };
- $.fn.countdown = main;
- })(jQuery);
使用实例：
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
- <script type="text/javascript" src="jquery.countdown.js"></script>
- </head>
- <body>
- <script type="text/javascript">
- $(function(){
- $(‘ul‘).countdown(function(s, d){
- var items = $(this).find(‘span‘);
- items.eq(0).text(d.total);
- items.eq(1).text(d.second);
- items.eq(2).text(d.minute);
- items.eq(3).text(d.hour);
- items.eq(4).text(d.day);
- });
- });
- </script>
- <ul data-seconds="3344"> //值3344 为总共的秒数
- <li>总共<span>-</span>秒</li>
- <li><span>-</span>秒</li>
- <li><span>-</span>分</li>
- <li><span>-</span>时</li>
- <li><span>-</span>天</li>
- </ul>
- <ul data-seconds="97545">
- <li>总共<span>-</span>秒</li>
- <li><span>-</span>秒</li>
- <li><span>-</span>分</li>
- <li><span>-</span>时</li>
- <li><span>-</span>天</li>
- </ul>
- <ul data-seconds="10">
- <li>总共<span>-</span>秒</li>
- <li><span>-</span>秒</li>
- <li><span>-</span>分</li>
- </ul>
- </body>
- </html>
基本上我们从jquery上现在有这个jquery.countdown.js 名字是一样的，但是我看里面的内容是不一样的。因而我用的是以上代码。 （至于从官网上下载的jquery.countdown.js是否能用。本人试的时候确实是不行。直接用以上代码即可实现一个页面多个倒计时。）