jquery countdown effect after clicking button: useful in mobile phone / email verification code

created at 07-24-2021 views: 4

jquery realizes the countdown effect after clicking the button, which is mostly used to realize the sending of mobile phone verification code and email verification code

<html>
<head>  
<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script>  
var InterValObj; //Timer variable, control time
var count = 5; //Interval function, executed in 1 second
var curCount;//Current remaining seconds


function sendMessage() {  
   curCount = count;  
  //Set the button effect and start timing
     $("#btnSendCode").attr("disabled", "true");  
     $("#btnSendCode").val("please input the code in" + curCount + "seconds");  
     InterValObj = window.setInterval(SetRemainTime, 1000); //Start the timer, execute once every 1 second
    //Send processing data to the background
     $.ajax({  
       type: "POST", //Use POST method to transmit
       dataType: "text", //data format:JSON  
       url: 'Login.ashx', //target address
       data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,  
       error: function (XMLHttpRequest, textStatus, errorThrown) { },  
       success: function (msg){ }  
     });  
}  


//timer processing function
function SetRemainTime() {  
            if (curCount == 0) {                  
                window.clearInterval(InterValObj);//Stop timer
                $("#btnSendCode").removeAttr("disabled");//Enable button
                $("#btnSendCode").val("Resend Code");  
            }  
            else {  
                curCount--;  
                $("#btnSendCode").val("please input the code in" + curCount + "seconds");  
            }  
        }  
</script>  
</head>  
<body>  
        <input id="btnSendCode" type="button" value="Resend Code onclick="sendMessage()" /></p>  
</body>  
</html>
Please log in to leave a comment.