Get SMS verification code countdown

Keywords: Mobile JQuery Javascript

Development tools and key technologies: back end
Author: Wang Liyan
Time of writing: May 12, 2019
Hi, lovely me again!
Recently, I'm working on a project. It's necessary to register and log in. So what I'm going to say today is to get the countdown of SMS verification code when registering, because when registering, you need to use your mobile number to register. You need to get the verification code when registering with your mobile number, and you can only log in after you enter the verification code. Now I will write this method. (renderings)

Click to acquire the verification code and start the countdown. The countdown starts from 60 seconds until the end of 0 seconds. After that, return to acquire again.
I. HTML

<body>
<form> 
  <label style="float:left;">Verification Code</label> 
     <input type="text" class="c_code_msg" style="margin-right: 10px;"> 
        <span class="msgs">Get SMS verification code</span>
  </form>
</body>

Two, CSS

<style type="text/css">
 form{ 
   margin:100px auto; 
   width:500px; 
 }
 label{ 
   font-size:16px;
   line-height:40px; 
   margin-right:10px; 
 }
 input{ 
   width:212px;
   height:38px; 
   padding:0 4px; 
 }
 .msgs{ 
   display:inline-block; 
   width:104px; 
   color:#fff; 
   font-size:12px; 
   border:1px solid #0697DA; 
   text-align:center; 
   line-height:30px;
   background:#0697DA; 
 }
 form .msgs1{//Seconds counted down
   background:#E6E6E6; 
   color:#818080; 
   border:1px solid #CCCCCC;
 }
</style>

III. JavaScript

<script src="../js/jquery-3.2.1.min.js"></script>//js plug-in
<script>$(function () {
 //Get SMS verification code
  var validCode=true; 
  $(".msgs").click (function  () {  
  var time=60;//Seconds 
  var code=$(this);
     if (validCode) { 
        validCode=false;  
        code.addClass("msgs1"); 
   var t=setInterval(function  () {  
          time--;  
          code.html(time+"second"); 
      if (time==0) {    clearInterval(t);  
           code.html("Regain");    
           validCode=true;  
           code.removeClass("msgs1"); 
          }  
        }，1000)
      }
   })
 })
</script>

Note: be sure to refer to < script SRC = ".. / JS / jquery-3.2.1. Min.js" >.

Posted by 0p3n_p0rT on Tue, 12 Nov 2019 09:09:12 -0800

Programmer Group

Get SMS verification code countdown

Hot Keywords