Home >Web Front-end >JS Tutorial >JS implements SMS verification code

JS implements SMS verification code

巴扎黑Original: 2017-08-11 10:16:432512browse

To implement the SMS verification code interface, you must first have a text box with a button next to it. When clicked, the countdown starts. Next, through this article, I will share with you the js implementation of a simple SMS verification code interface. Friends who are interested can refer to it

1. To implement the SMS verification code interface, first there must be a text box with a button next to it. When clicked, Start countdown.

2. First create a text box and button, set the corresponding id for the button, and then obtain the button element through the id in js and perform operations on it. At the same time, the countdown time and timer variables should be set so that after clicking the send button, it is impossible to continue clicking the button to resend before the countdown ends.

3. After the countdown is over, clear the timer and change the text to "Resend Verification Code" to restore the ability to operate the button. At the same time, restart the countdown from 5 seconds so that you can click it again. Countdown.

<head> 
  <meta charset="UTF-8"> 
  <title>js发送短信验证码</title> 
</head> 
<body> 
  <input type="text"/><button id="bt01">发送验证码</button> 
</body> 
<script type="text/javascript"> 
  var bt01 = document.getElementById("bt01"); 
  bt01.onclick = function() { 
    bt01.disabled = true;  //当点击后倒计时时候不能点击此按钮 
    var time = 5;  //倒计时5秒 
    var timer = setInterval(fun1, 1000);  //设置定时器 
    function fun1() { 
      time--; 
      if(time>=0) { 
        bt01.innerHTML = time + "s后重新发送"; 
      }else{ 
        bt01.innerHTML = "重新发送验证码"; 
        bt01.disabled = false;  //倒计时结束能够重新点击发送的按钮 
        clearTimeout(timer);  //清除定时器 
        time = 5;  //设置循环重新开始条件 
      } 
    } 
  } 
</script>

The above is the detailed content of JS implements SMS verification code. For more information, please follow other related articles on the PHP Chinese website!

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：Compare the differences and connections between express and koa middleware patternsNext article：Compare the differences and connections between express and koa middleware patterns

See more

JS implements SMS verification code

Related articles