search

Home >Web Front-end >JS Tutorial >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:482964browse

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!

jquery date JS 对象
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of jquery gesture password plug-inNext article：Detailed explanation of jquery gesture password plug-in

Related articles

See more