前端jquery倒计时获取短信验证码过期后可以再点击获取.

用Jquery在做前端的交互部分，短信验证码倒计时获取。

本模块的功能，包含验证用户输入的手机号是否在后台注册过，重复注册时，先提升更换号码，

而不是直接发短信验证码，和手机号一起提交后再验证，这样有效降低短信发送数量。

html页面 

<div class="form-group">
                        <input type="hidden" id="nickname" value="<?php echo $mobile;?>" name="mobile"/>
                  
                    </div>
  <div class="form-group  d-flex justify-content-between">
                        <div style="width:30%"><input type="text" name="smscode" id="smscode"  class="form-control"
                                                placeholder="短信验证码"
                                                autocapitalize="none" autocorrect="off" required/></div>
                     <div style="width:70%; text-align: right;">
                         <a  id="redobtn" data-smstype="reset" data-canresend="1" class="btn btn-light" href="[removed]void(0)">
                                            <i class="fa fa-arrow-circle-right"></i>点击发送短信验证码  </a></div>
                    </div>

js部分：

首先用户输入手机号码，点击按钮获取验证码，进入倒计时200秒，修改这个数值是通过<span>200</span>

这个地方调整。对应要后台在验证短信验证码的时效时也要修改对应数值。

$(document).ready(function () {
        if($("#redobtn").length>0){
            
            //设置步骤表单提交进入下一步
            var daojis = $('<label>倒计时(<span>200</span>)秒<label>');
             var timmer ;
            var daojisfunction = function(){
                var now = daojis.find("span").html();
                if(now==0){
                    $("#redobtn").data('canresend', "1");
                    clearInterval(timmer);
                     $("#redobtn").html(' <i class="fa fa-arrow-circle-right"></i>点击发送短信验证码').addClass('btn-primary');
                    return;
                }else{
                    now = now -1;
                    daojis.find("span").html(now);
                }
            }
            if($("#redobtn").data('canresend')=="0"){
           
                $("#redobtn").html(daojis).removeClass('btn-primary');
                $("#redobtn").data('canresend', "0");               
                timmer = setInterval( daojisfunction, 1000); 
            }else{
                 $("#redobtn").html(' <i class="fa fa-arrow-circle-right"></i>点击发送短信验证码').addClass('btn-primary'); 
            }
            //onclick
             $("#redobtn").click(function(){
                 var mobile = $("#nickname").val();                 
                 var last = $("#lasttime").val();
                 if(!mobile){
                     layer.msg("请输入手机号码");
                     return;
                 } 
                 var smstype = $(this).data("smstype");
                 var isregister = false;
                 $.ajax({
                     url:'/index.php?s=user/ckmobile' ,
                     async: false,
                     method: "POST",
                     data:{ mobile: mobile, },
                     success: function(ret){
                         if(ret.status ==1){
                             isregister = true;
                         }
                     }
                 })
                 if(isregister && smstype=='add'){
                     layer.msg("手机号已经注册过");
                     return;
                 }
                
                 if($(this).data('canresend')==1 && mobile && last ){
                    
                     var smstype = $(this).data('smstype');
                     $.ajax({url:'/index.php?s=user/sendsms' ,
                        method: "POST",
                        data: {mobile: mobile, last: last, type: smstype},
                        beforeSend: function(xhr) {
                             xhr.setRequestHeader("X-CSRF-TOKEN", $("input[name='__token__']").val());
                         }, 
                        success: function(ret){   
                            if(ret.status){
                                daojis.find("span").html("200");
                                $("#redobtn").html(daojis).removeClass('primary');
                                $("#redobtn").data('canResend', "0");
                                timmer = setInterval( daojisfunction, 1000); 
                                $("#lasttime").val(ret.lasttime); //最后发送时间
                            }else{
                                    layer.msg(ret.msg);
                                }
                        }
                     })
                 }
             })
        }
 });