jQuery implémente la fonction de compte à rebours pour l'envoi de messages texte

Cet article se concentrera sur les fonctions suivantes :

1. Lorsque vous cliquez sur le bouton, vous pouvez compter à rebours et personnaliser le compte à rebours. 2. Lorsque la réception du message texte échoue, le compte à rebours s'arrête et vous pouvez. cliquez pour renvoyer le message texte. .3. L'élément cliqué prend en charge les balises générales et les balises d'entrée. Bien que cela semble très compliqué, le code d'implémentation est en fait très simple. Laissez-moi partager le code d'implémentation avec vous. Les amis qui en ont besoin peuvent s'y référer. Les principales fonctions mises en œuvre par

sont les suivantes :

1 Lorsque vous cliquez sur le bouton, vous pouvez décompter et personnaliser le compte à rebours.

2. Lorsque la réception du message texte échoue, le compte à rebours s'arrête et vous pouvez cliquer pour renvoyer le message texte.

3. L'élément cliqué prend en charge les balises générales et les balises d'entrée.

code html :

<input type="button" class="sameBtn btnCur" value="发送验证码"/>
<p class="sameBtn btnCur2">发送验证码</p>

code 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;}

Code 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(&#39;type&#39;) ? this.$element.val(&#39;0&#39; + self.number + self.settings.cnSeconds) : this.$element.html(&#39;0&#39; + self.number + self.settings.cnSeconds);  
        }else{
          this.$element.attr(&#39;type&#39;) ? 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(&#39;type&#39;) ? 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 ===&#39;object&#39; ){
      return this.each(function(){
        if(!$.data(this,&#39;plugin&#39; + pluginName)){
          $.data(this,&#39;plugin&#39; + pluginName,new Count(this,options));
        }
      });
    }
    else if(typeof options === &#39;string&#39; && options !== &#39;init&#39;){
      var returns;
       this.each(function(){
        var data = $.data(this,&#39;plugin&#39; + pluginName);
        if(data instanceof Count && typeof data[options] === &#39;function&#39;){
          returns = data[options].apply(data,Array.prototype.slice.call(args,1));
        }
        if(options === &#39;destory&#39;){
           $.data(this, &#39;plugin&#39; + pluginName, null);
        }
      });
       return returns !== undefined ? returns : this;
    }
    else{
      $.error(&#39;Method&#39; + options + &#39;does not exist on jQuery.CountDownF&#39;);
    }
  }
})(jQuery,window,document);

Méthode d'appel :

$(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);
    }
  });
})

Adresse Github : https://github.com/hxlmqtily1314/sms_countdown

Comment tout le monde l'a-t-il appris ? Dépêchez-vous et essayez-le.

Recommandations associées :

Partage de nombreux codes PHP pratiques comme l'envoi d'emails SMS via PHP

Réalisation du compte à rebours de 60 secondes après envoi du code de vérification SMS

php envoie le code de vérification SMS pour terminer la fonction d'inscription

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!