jQuery基于擴(kuò)展簡(jiǎn)單實(shí)現(xiàn)倒計(jì)時(shí)功能的方法

字號(hào):


    這篇文章主要介紹了jQuery基于擴(kuò)展簡(jiǎn)單實(shí)現(xiàn)倒計(jì)時(shí)功能的方法,涉及jQuery擴(kuò)展與回調(diào)函數(shù)的相關(guān)使用技巧,需要的朋友可以參考下
    本文實(shí)例講述了jQuery基于擴(kuò)展簡(jiǎn)單實(shí)現(xiàn)倒計(jì)時(shí)功能的方法。分享給大家供大家參考,具體如下:
    jQuery.fn.countDown = function(settings,to) {
      settings = jQuery.extend({
        startFontSize: '36px',
        endFontSize: '12px',
        duration: 1000,
        startNumber: 10,
        endNumber: 0,
        callBack: function() { }
      }, settings);
      return this.each(function() {
        //where do we start?
        if(!to && to != settings.endNumber) { to = settings.startNumber; }
        //set the countdown to the starting number
        $(this).text(to).css('fontSize',settings.startFontSize);
        //loopage
        $(this).animate({
          'fontSize': settings.endFontSize
        },settings.duration,'',function() {
          if(to > settings.endNumber + 1) {
            $(this).css('fontSize',settings.startFontSize).text(to - 1).
     countDown(settings,to - 1);
          }
          else
          {
            settings.callBack(this);
          }
        });
      });
    };
    /* sample usage
    //調(diào)用方法
    //
    $('#countdown').countDown({
      startNumber: 10,
      callBack: function(me) {
        $(me).text('倒計(jì)時(shí)加載完畢').css('color','#090');
      }
    });
    希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。