Click the button to send the verification code and a countdown will appear.-JS Tutorial-php.cn

Click the button to send the verification code and a countdown will appear.

小云云

Release： 2018-01-22 13:13:48

Original

2945 people have browsed it

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>

Copy after login

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!