丁宇 | blog

Related Posts

• jQuery的Ajax在特定版本的IE下执行失败2007-08-27 15:49:01
• 有趣的setTimeout和clearTimeout2008-04-22 20:45:21
• 帮你自动更换壁纸的小软件：Desktoptopia2008-01-03 13:08:15
• Clicktale支持输出完整的网页热区图像了！2009-02-02 14:28:04
• 强悍的jQuery选择器2007-12-02 11:02:00
• 第三届D2前端技术论坛2008-11-10 20:18:00
• 使用Docker精简你的Dock2008-02-20 14:33:59
• 介绍两个好网站：Aero Taskforce和Aqua Taskforce2008-08-25 00:08:13
• User Friendly 20072007-12-02 19:27:00
• LonelyThinker 0.4预览2007-12-07 00:53:02

12 comments so far

1. cssrain 2008-03-29 20:53:59

   嘿嘿

2. xiong 2008-06-28 04:58:49

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

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

   just my 2c.

   thanks

3. skyblue 2008-07-12 23:41:27

   建议搞个加强版..

   可以把秒格式成分钟显示的

4. lei 2008-11-20 11:58:32

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

5. Trent 2008-12-09 06:17:25

   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

   );

6. Trent 2008-12-09 06:19:19

   Woops typos in last post

   //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

   );

7. 丁宇 2008-12-09 17:29:11

   @Trent: thanks for the submit!

8. Javi 2009-01-09 17:42:33

   //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

   );

9. wiki 2009-02-23 23:22:04

   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-18 22:55:27

    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.digits == 'undefined')

    options.digits = 2 ;

    /**

    * break out and execute callback (if any)

    */

    if(options.seconds < 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 00:50:05

    这个插件如何，xhtml代码很简单：

    <label>4</label>

    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 10:30:42

    @hiro 看了你的网站，头部的鼠标效果很有意思