写了一个简单的倒计时（countdown）插件，用法非常简单：

$('div.countdown').countdown({seconds: 3,callback: 'helloWorld()'});

上例中，这个插件会在div.countdown中插入3秒钟的倒计时，直到0为止并调用helloWorld()这个函数。

这个插件有两个选项：

• seconds - 从多少秒开始倒计时；
• callback - 可选，倒计时结束时执行的回调函数。

目前的版本是0.2，下载地址如下：

• jquery.countdown.js，2kb
• jquery.countdown.min.js，1kb

这个插件在jQuery Plugins上的项目站点，觉得好用可以投上一票 ：）。

更新记录：

0.2。加入了stop()方法，可以停止一个正在进行中的倒计时。

1. cssrain @ 2008-03-30 04:53:59 +0800:

   嘿嘿

2. xiong @ 2008-06-28 12:58:49 +0800:

   very nice script! It would be better if follows the standard format:

   $('#div').countdown('3', function(){});

   just my 2c.

   thanks

3. skyblue @ 2008-07-13 07:41:27 +0800:

   建议搞个加强版..
   可以把秒格式成分钟显示的

4. lei @ 2008-11-20 19:58:32 +0800:

   顶~~~~~~~~~~~~~

5. Javi @ 2009-01-10 01:42:33 +0800:

   //With "clock format": 04:30

   window.setTimeout(

   function() {
   mins = Math.floor(options.seconds/60);
   secs = options.seconds - (mins*60);
   
   if (mins.toString().length < 2) {
   minsLabel = '0' + mins;
   }
   else {
   minsLabel = mins;
   }
   if (secs.toString().length < 2) {
   secsLabel = '0' + secs;
   }
   else {
   secsLabel = secs;
   }
   
   jQuery(obj).html(String(minsLabel+':'+secsLabel));
   --options.seconds;
   jQuery(obj).countdown(options);
   
   }

   , 1000

   );

6. Trent @ 2008-12-09 14:17:25 +0800:

   Thanks!!

   A mod for you.

   //Display time in mins secs format :)

   /**
   * recursive countdown
   */
   window.setTimeout(
   function() {
   
   mins = Math.floor(mins_prep/60);
   secs = mins_prep - (mins*60);

   jQuery(obj).html(String(mins+' mins '+secs+' secs'));
   --options.seconds;
   jQuery(obj).countdown(options);
   }
   , 1000
   );

7. Trent @ 2008-12-09 14:19:19 +0800:

   Woops typos in last post [emoticon:emu]

   //Display time in mins secs format :)

   /**

   * recursive countdown

   */

   window.setTimeout(

   function() {

   mins = Math.floor(options.seconds/60);

   secs = options.seconds - (mins*60);

   jQuery(obj).html(String(mins+' mins '+secs+' secs'));

   --options.seconds;

   jQuery(obj).countdown(options);

   }

   , 1000

   );

8. 丁宇 @ 2008-12-10 01:29:11 +0800:

   @Trent: thanks for the submit! [emoticon:smile_1]

9. wiki @ 2009-02-24 07:22:04 +0800:

   To become able and be more flexible in formating, I've added a format_function callback.

   /**
   * recursive countdown
   */
   window.setTimeout(
   function() {
   if( options.format_function ) {
   jQuery(obj).html( options.format_function( options.seconds ) );
   } else {
   jQuery(obj).html(String(options.seconds));
   }
   --options.seconds;
   jQuery(obj).countdown( options );
   }
   , 1000
   );

10. Hatem BEN RAIS @ 2009-08-19 06:55:27 +0800:

    Hey,

    Nice plugin, thanks!

    Here is a modified version that displays countdown in HH:MM:SS format:

    jQuery.fn.CountDown = function(options) {
    /**
    * app init
    */
    if(!options) options = '()';
    if(jQuery(this).length == 0) return false;
    var obj = this;
    
    
    if (!options.digits || options.digits < 0 || options.seconds == 'undefined')
    {
    if(options.callback) eval(options.callback);
    return null;
    }
    
    
    /**
    * add leading zeros to number
    */
    function pad_digits(nb, totalDigits) {
    nb = nb.toString();
    
    var pd = '';
    
    if (totalDigits > nb.length)
    for (i=0; i < (totalDigits - nb.length); i++)
    pd += '0';
    
    
    
    return pd + nb.toString();
    };
    
    
    
    /**
    * recursive countdown
    */
    window.setTimeout(
    function() {
    jQuery(obj).html(String(pad_digits(options.hours, options.digits) + ' : ' + pad_digits(options.minutes, options.digits) + ' : ' + pad_digits(options.seconds, options.digits)));
    
    options.seconds -= 1 ;
    if (options.seconds < 0) {
    options.seconds = 59;
    
    options.minutes -= 1;
    if (options.minutes < 0) {
    options.minutes = 59;
    
    options.hours -= 1;
    if (options.hours < 0) {
    options.hours = 23;
    }
    }
    }
    
    jQuery(obj).CountDown(options);
    }
    , 1000
    );

    /**
    * return null
    */
    return this;
    }

    Simple usage:
    $('#countdown').CountDown({hours:3, minutes:38, seconds:15, digits:2});

11. hiro @ 2010-03-20 08:50:05 +0800:

    这个插件如何，xhtml代码很简单：
    4
    jQuery代码：
    ;(function($) {
    $.fn.timer = function(callback) {
    var _this = this,
    oldTimer = _this.text(),
    timer = oldTimer;
    
    var id = setInterval(function() {
    timer--;
    if(timer == 0) {
    clearInterval(id);
    };
    _this.text(timer);
    }, 1000);
    
    setTimeout(function() {
    if(callback) {
    callback();
    };
    }, oldTimer*1000);
    };
    })(jQuery);
    jQuery(function($) {
    $('label').timer(function() {
    alert('倒计时结束');
    });
    });

    欢迎回访我的博客，给我提点意见啊！！

12. 丁宇 @ 2010-03-22 18:30:42 +0800:

    @hiro 看了你的网站，头部的鼠标效果很有意思 [emoticon:clin_oeil]