欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery插件開發(fā)發(fā)送短信倒計(jì)時(shí)功能代碼

 更新時(shí)間:2017年05月09日 10:17:52   作者:風(fēng)雨后見彩虹  
最近項(xiàng)目開發(fā)中遇到這樣的功能:1.點(diǎn)擊按鈕的時(shí)候,可以進(jìn)行倒計(jì)時(shí),倒計(jì)時(shí)自定義.2.當(dāng)接收短信失敗后,倒計(jì)時(shí)停止,可點(diǎn)擊重新發(fā)送短信.3.點(diǎn)擊的元素支持一般標(biāo)簽和input標(biāo)簽??此坪軓?fù)雜其實(shí)實(shí)現(xiàn)代碼很簡單,下面小編給大家分享下實(shí)現(xiàn)代碼,需要的朋友參考下吧

實(shí)現(xiàn)的主要功能如下:

1.點(diǎn)擊按鈕的時(shí)候,可以進(jìn)行倒計(jì)時(shí),倒計(jì)時(shí)自定義。

2.當(dāng)接收短信失敗后,倒計(jì)時(shí)停止,可點(diǎn)擊重新發(fā)送短信。

3.點(diǎn)擊的元素支持一般標(biāo)簽和input標(biāo)簽。

html代碼:

<input type="button" class="sameBtn btnCur" value="發(fā)送驗(yàn)證碼"/>
<div class="sameBtn btnCur2">發(fā)送驗(yàn)證碼</div>

css代碼:

body{padding:100px;text-align: center;}
.sameBtn{display: inline-block;font-size:12px;cursor:pointer;width:76px;height:25px;line-height: 25px;text-align: center;border:0;background: #3186df;color:#fff;}
.sameBtn.current{background: #b1b1b1;}

js代碼:

//短信倒計(jì)時(shí)功能
/**使用方式如下:
 * $(".btnCur").CountDownF({
 *    time:120,
 *     resetWords:'重新發(fā)送', //文字定義 
 *    cnSeconds:'s',//倒計(jì)時(shí)中顯示中文的秒,還是s
 *    clickClass:'current', //點(diǎn)擊后添加的class類
 *    countState:true,
 *    callback:function(){
 *      setTimeout(function(){
 *       //當(dāng)發(fā)送失敗后,可以立即清除倒計(jì)時(shí)與其狀態(tài)
 *        $(".btnCur").CountDownF('clearState');
 *      },3000);
 *    }
 *  });
 * 
 * */
;(function($,window,document,undefined){
  var pluginName = 'CountDownF',
  defaluts = {
    time:120,
    resetWords:'重新發(fā)送', //文字定義
    cnSeconds:'s',//倒計(jì)時(shí)中顯示中文的秒,還是s
    clickClass:'current', //點(diǎn)擊后添加的class類
    countState:true //是否可以倒計(jì)時(shí),true可以倒計(jì)時(shí),false不能進(jìn)行倒計(jì)時(shí)
  }
  function Count(element,options){
    this.element = element;
    this.$element = $(this.element);
    this.state = true;
    this.settings = $.extend({},defaluts,options);
    this.number = this.settings.time;
    this.init();
  }
  Count.prototype = {
    init:function(){
      var self = this;
      self.$element.on('click',function(){
        if(self.state && self.settings.countState){
          self.state = false;
          if(self.settings.countState){
            self._count();
          }
          if(self.settings.callback){
            self.settings.callback();
          }
        }
      });
    },
    //倒計(jì)時(shí)函數(shù)
    _count:function(){
      var self = this;
      if(self.number == 0){
        self._clearInit();
      }else{
        if(self.number < 10){
          //如果當(dāng)前元素是input,使用val賦值
          this.$element.attr('type') ? this.$element.val('0' + self.number + self.settings.cnSeconds) : this.$element.html('0' + self.number + self.settings.cnSeconds);  
        }else{
          this.$element.attr('type') ? this.$element.val(self.number + self.settings.cnSeconds) : this.$element.html(self.number + self.settings.cnSeconds);
        }
        self.number--;
        this.$element.addClass(self.settings.clickClass);
        self.clearCount = setTimeout(function(){
          self._count();
        },1000);
      }
    },
    //修改是否可發(fā)送短信驗(yàn)證碼倒計(jì)時(shí)狀態(tài)
    change:function(state){
      var self = this;
      self.settings.countState = state;
    },
    //置為初始狀態(tài)
    _clearInit:function(){
      var self = this;
      self.$element.removeClass(self.settings.clickClass);
      self.$element.attr('type') ? self.$element.val(self.settings.resetWords) : self.$element.html(self.settings.resetWords); 
      clearTimeout(self.clearCount);
      self.number = self.settings.time;
      self.state = true;
    },
    //清除倒計(jì)時(shí)進(jìn)行狀態(tài)
    clearState:function(){
      var self = this;
      self._clearInit();
    }
  };
  $.fn.CountDownF = function(options){
    var args = arguments;
    if(options === undefined || typeof options ==='object' ){
      return this.each(function(){
        if(!$.data(this,'plugin' + pluginName)){
          $.data(this,'plugin' + pluginName,new Count(this,options));
        }
      });
    }
    else if(typeof options === 'string' && options !== 'init'){
      var returns;
       this.each(function(){
        var data = $.data(this,'plugin' + pluginName);
        if(data instanceof Count && typeof data[options] === 'function'){
          returns = data[options].apply(data,Array.prototype.slice.call(args,1));
        }
        if(options === 'destory'){
           $.data(this, 'plugin' + pluginName, null);
        }
      });
       return returns !== undefined ? returns : this;
    }
    else{
      $.error('Method' + options + 'does not exist on jQuery.CountDownF');
    }
  }
})(jQuery,window,document);

調(diào)用方式:

$(function(){
  $(".btnCur").CountDownF({
    time:120,
    countState:true,
    callback:function(){
      setTimeout(function(){
        $(".btnCur").CountDownF('clearState');
      },3000);
    }
  });
  $(".btnCur2").CountDownF({
    time:50,
    countState:true,
    cnSeconds:'秒',
    callback:function(){
      setTimeout(function(){
        $(".btnCur2").CountDownF('clearState');
      },5000);
    }
  });
})

 github地址:https://github.com/hxlmqtily1314/sms_countdown

以上所述是小編給大家介紹的jQuery插件開發(fā)發(fā)送短信倒計(jì)時(shí)功能代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評(píng)論