js 獲取驗證碼計時器

zhengyeye發表於2018-10-31
JS

效果圖：

貼上程式碼：

 <div class="logintitle">
       <input type="tel" id="mobile" name="mobile" maxlength="11" value="" placeholder="請輸入手機號">
       <button class="codebutton" onclick="getCode()" id="getcode">獲取驗證碼</button>
  </div>

 

//獲取簡訊驗證碼
    function getcode(){
        $('#getcode').attr("disabled",true);
        var mobile=$('#mobile').val();//手機號
        if(!mobile){
            layer.msg('手機號碼不能為空！');
            $('#getcode').removeAttr("disabled");
            return;
        }
        if(!/^([1])\d{10}$/.test(mobile)){
            layer.msg('請輸入正確的手機號碼！');
            $('#getcode').removeAttr("disabled");
            return;
        }
        countDownTimer();
        isphonecode=true;
        jQuery.post('/share/getcode',{
            mobile:mobile
        },function(res){
            if(res.status==1){//獲取驗證碼正常，則不進行處理

            }else if(res.status==-1){
                layer.msg('獲取簡訊驗證碼頻繁，請一分鐘後再試！');
                $('#getcode').removeAttr("disabled");
                return;
            }else{
                layer.msg('網路異常，請一分鐘後重新獲取驗證碼！');
                $('#getcode').removeAttr("disabled");
                return;
            }
        })
    }
    // 獲取驗證碼
    function countDownTimer(){
        timer = setInterval(function(){
            second -= 1; 
            if(second >0 ){
                $('#getcode').attr("disabled",true);
                $('.codebutton').css('background-color','#e8e5e5');
                $('#getcode').text("重新傳送(" + second + ")");
            }else{
                second=60;
                clearInterval(timer);
                $('#getcode').removeAttr("disabled");
                $('.codebutton').css('background-color','#b2ecf3');
                $('#getcode').text("獲取驗證碼");
            }
        },1000);
    }

 

相關文章