丁宇 | DING Yu

jQuery的Countdown插件 v0.2

写了一个简单的倒计时(countdown)插件,用法非常简单:

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

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

这个插件有两个选项:

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

目前的版本是0.2,下载地址如下:

这个插件在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]