jquery countdown effect after clicking button: useful in mobile phone / email verification code
created at 07-24-2021
views: 32
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>
