jQuery插件开发发送短信倒计时功能代码

实现的主要功能如下：

1.点击按钮的时候，可以进行倒计时，倒计时自定义。

2.当接收短信失败后，倒计时停止，可点击重新发送短信。

3.点击的元素支持一般标签和input标签。

html代码：

<input type="button" class="samebtn btncur" value="发送验证码"/>
<div class="samebtn btncur2">发送验证码</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代码：

//短信倒计时功能
/**使用方式如下：
 * $(".btncur").countdownf({
 *    time:120,
 *     resetwords:'重新发送', //文字定义 
 *    cnseconds:'s',//倒计时中显示中文的秒，还是s
 *    clickclass:'current', //点击后添加的class类
 *    countstate:true,
 *    callback:function(){
 *      settimeout(function(){
 *       //当发送失败后，可以立即清除倒计时与其状态
 *        $(".btncur").countdownf('clearstate');
 *      },3000);
 *    }
 *  });
 * 
 * */
;(function($,window,document,undefined){
  var pluginname = 'countdownf',
  defaluts = {
    time:120,
    resetwords:'重新发送', //文字定义
    cnseconds:'s',//倒计时中显示中文的秒，还是s
    clickclass:'current', //点击后添加的class类
    countstate:true //是否可以倒计时，true可以倒计时，false不能进行倒计时
  }
  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();
          }
        }
      });
    },
    //倒计时函数
    _count:function(){
      var self = this;
      if(self.number == 0){
        self._clearinit();
      }else{
        if(self.number < 10){
          //如果当前元素是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);
      }
    },
    //修改是否可发送短信验证码倒计时状态
    change:function(state){
      var self = this;
      self.settings.countstate = state;
    },
    //置为初始状态
    _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;
    },
    //清除倒计时进行状态
    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);

调用方式：

$(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地址：

以上所述是小编给大家介绍的jquery插件开发发送短信倒计时功能代码，希望对大家有所帮助