Home > Article > Web Front-end > Click the button to send the verification code and a countdown will appear.
Click the button to send the verification code and a countdown will appear.
- 小云云Original
- 2018-01-22 13:13:482862browse
Sometimes when we send a verification code, there will always be a countdown function. The following editor will bring you a simple example of clicking a button to send a verification code and a countdown will appear. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
The examples are as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var InterValObj; //timer变量，控制时间
var count = 30; //间隔函数，1秒执行
var curCount;//当前剩余秒数
function sendMessage() {
curCount = count;
//设置button效果，开始计时
$("#btnSendCode").attr("disabled", "true");
$("#btnSendCode").val(curCount + "秒后可重新发送");
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
//请求后台发送验证码 TODO
}
//timer处理函数
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止计时器
$("#btnSendCode").removeAttr("disabled");//启用按钮
$("#btnSendCode").val("重新发送验证码");
}
else {
curCount--;
$("#btnSendCode").val(curCount + "秒后可重新发送");
}
}
</script>
</head>
<body>
<input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p>
</body>
</html>
Have you learned it? Hurry up and try it out.
Related recommendations:
js implements countdown animation effect through Date object example sharing
Simple mobile phone registration to send verification code countdown Implementation method
jQuery implements the countdown function for sending text messages
The above is the detailed content of Click the button to send the verification code and a countdown will appear.. For more information, please follow other related articles on the PHP Chinese website!