Home  >  Article  >  Web Front-end  >  js realizes the countdown effect of clicking to get the verification code_javascript skills

js realizes the countdown effect of clicking to get the verification code_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:34:242097browse

In order to prevent malicious attempts to obtain verification text messages and verification emails, the website will have a countdown effect on the button that clicks to obtain the verification code. To implement this function, a setInterval and a clearInterval can be used, and it does not require too much code. The example effects and codes are as follows:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<input type="button" style="height:32px;width:120px;" value="点击发送验证码" onclick="sendCode(this)" />
<script type="text/javascript">
 var clock = '';
 var nums = 10;
 var btn;
 function sendCode(thisBtn)
 { 
 btn = thisBtn;
 btn.disabled = true; //将按钮置为不可点击
 btn.value = nums+'秒后可重新获取';
 clock = setInterval(doLoop, 1000); //一秒执行一次
 }
 function doLoop()
 {
 nums--;
 if(nums > 0){
  btn.value = nums+'秒后可重新获取';
 }else{
  clearInterval(clock); //清除js定时器
  btn.disabled = false;
  btn.value = '点击发送验证码';
  nums = 10; //重置时间
 }
 }
</script>

Use setInterval and clearIntervaljs to achieve the countdown effect of js click to obtain verification code. I hope it will be helpful to everyone's learning.

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