jQueryはテキストメッセージを送信するためのカウントダウン機能を実装します

この記事では次の機能に焦点を当てます:

1. ボタンをクリックすると、カウントダウンし、カウントダウンをカスタマイズできます。 2. テキスト メッセージの受信に失敗すると、カウントダウンが停止し、クリックしてテキスト メッセージを再送信できます。 3. クリックされた要素 一般タグと入力タグをサポートします。非常に複雑に見えますが、実装コードは実際には非常に単純です。必要な方は参考にしてください。

実装されている主な機能は次のとおりです:

1. ボタンをクリックすると、カウントダウンとカウントダウンのカスタマイズができます。

2. テキスト メッセージの受信に失敗すると、カウントダウンが停止し、クリックしてテキスト メッセージを再送信できます。

3. クリックされた要素は、一般タグと入力タグをサポートします。

htmlコード:

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

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(&#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);

呼び出しメソッド:

$(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

皆さんも学んでみてはいかがでしょうか？急いで試してみてください。

関連する推奨事項:

PHP は SMS メールやその他多くの実用的な PHP コード共有を送信します

SMS 確認コード送信後の 60 秒のカウントダウンを実現します

php は SMS 確認コードを送信して登録機能を完了します

以上がjQueryはテキストメッセージを送信するためのカウントダウン機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。