JS/JQ to get phone verification code Countdown effect

Well-known in the previous section of the work to register information or to obtain the current mobile phone number information needs, we basically have to relate to mobile phone number verification code, the search on the network of the case of chaos, when used is all pits, really do not want to use, and then wrote a mobile phone verification code to get the countdown effect. The needs of the partners can see how to achieve.

650) this.width=650; "class=" AlignCenter wp-image-439 "src=" http://www.aliyue.net/wp-content/uploads/2016/02/ Yanzhengma-1-1024x967.jpg "alt=" Yanzhengma (1) "Width=" "height=" 567 "style=" height:auto;vertical-align:middle; border:0px;text-align:center;margin:0px auto; "/>

How do I get my phone verification code?

Xiao Yue does not know what platform we use to obtain the verification code, but tell everyone I was on which platform to obtain.

Leancloud : https://leancloud.cn/

Document : https://leancloud.cn/docs/sms_guide-js.html

In this platform first to register an account, in the settings to set their own information in accordance with the document to operate it can be said here, most of the background to operate some interface, our front-end has the ability to try to use PHP to write the interface. (Lazy I'm not going to write.) ）

It is generally two interfaces:

1. Send a verification request (so your phone will be verified by SMS)

2. Return data Verify that the phone number and verification are consistent

According to the background siege Lion's interface to achieve it.

working with front-end pages

The following code is the page shown

<div class= "Pop" >    <div class= "Con" >         <span class= "Close" ></span>         <div class= "Page1" >            <p class= "Info" >                <span class= "title" > Mobile number:</span>                <input type= "Tel"  class= "Tel"  id= "mobile"  onkeyup= "Value=value.replace (/[^\w\.\/]/ig,& #39;& #39;)"  required= ""   Placeholder= "Please enter your phone number" >           </p>            <p class= "Info" >                <span class= "title" > Verification Code:</span>               <input type= "Tel"  class= "code"   Placeholder= "Enter Verification Code" >               <span class= "Code1" > Get Verification Code </span>            </p>           <div class= "Demand  demand2 " style=" width: 70%; margin-top: 20px; " > Submit </div>       </div>        <div class= "Page2" >           <p  class= "P1" > Submit success </p>           <p  class= "P2" > We will &LT;/P&GT;&NBSP;&NBSP;&NBSP;&NBSP;&NB after the successful requestsp;      <p class= "P2" > The first time to inform you! </p>           <div class= "demand  Demand3 " style=" width: 80%; margin-top: 20px; margin-bottom: 10px; " > I know </div>       </div>    </div> </div>

Verify that the phone number is correct

Verify that the phone number//page of input is written by calling the method directly below the Jquery.extend ({checkmobileno:function (str) {var re =/^1[3|7|5|8]\d{9}$/;         if (Re.test (str)) {return true;         } else {return false; }     } });

JS/JQ Partial processing send SMS Verification request

Send the verification code to the phone  $.ajax ({ type:  ' GET ',  url: "The interface you provide in the background"  + mobile, //the interface above 1  Success: function (Data, status)  { if  (data.errcode==0)  { alert ("Sent");  $ (". Code1"). attr ("Disabled",  "disabled"),  $ (". Code1"). CSS ("Background-color",  "#b4b2b3") ;//The following is the implementation of the Countdown Effect Code  var d = new date ();  d.setseconds (D.getseconds ()  + 59 );  var m = d.getmonth ()  + 1; var time = d.getfullyear ()  +  '-'  + m +  '-'  + d.getdate ()  +  '   '  +  D.gethours ()  +  ': '  + d.getminutes ()  +  ': '  + d.getseconds ();  var  id =  ". Code1";  var end_time = new date (Date.parse (Time.replace (/-/g,   "/")). GetTime (),  //month is the actual month -1 sys_second =  (End_time - new date (). GetTime ())  / 1000; Var timer = setinterval (function ()  { if  (sys_second > 1)  {  sys_second -= 1; var day = math.floor ((sys_second / 3600)  / &NBSP;24);  var hour = math.floor ((sys_second / 3600)  % 24);  var  minute = math.floor ((sys_second / 60)  % 60);  var second =  math.floor (sys_second % 60); var time_text =  "; if  (day  > 0)  { time_text += day +  ' Day '; } if  (hour >  0)  { if  (hour < 10)  { hour =  ' 0 '  + hour; }  time_text += hour +  ' Hours '; } if  (minute > 0)  {  if  (minute < 10)  { minute =  ' 0 '  + minute; } time_ Text += minute +  '; } if  (second > 0)  { if  (second < 10)  { second =  ' 0 '  + second; } time_text += second +  ' Seconds ';  } $ (id). text (time_text);  } else { clearinterval (timer);  $ (". Code1"). attr ("Disabled",  false),  $ (". Code1"). Text (' Get Verification Code ');  $ (". Code1"). CSS ("Background-color",  "# F67a62,  } }, 1000);    }else{ alert ("Send failed, please try again.")  } }, error: function (Data, status)  { alert (status);  } });   });

submitting information to the server

Verify that the verification code and the verification code sent by the phone are consistent $.ajax ({type: ' GET ', url: "Interface 2", Success:function (data, status) {if (data.errcode==0) {//submit information to the server $.ajax ({type: ' POST ', url: "Submit to the server the information you requested to fill in the interface", Data:JSON.stringify ({//data here to see your needs according to the interface data to write "project_id": PID, "p Hone ": Mobile," Device ":d}), Success:function (data, status) {if (data.errcode==0) {$ ('. Page1 '). Hide (); $ ('. Page2 '). Sho W (); }else{alert ("Commit failed, please try once!");}, Error:function (data, status) {alert (data.errmsg);}); }else{alert ("The verification code is not correct! ");}, Error:function (data, status) {alert (status);});});

Finally finished, we have the need to try it yourself, this is only a part of the verification code of thousands of welcome to share OH. If you have any questions, you can ask Xiao Yue.

Please click to download the demo: Source download does not provide download please give me a message Oh!

This article is from the "Ask Me" blog, please be sure to keep this source http://vipweb.blog.51cto.com/9985606/1787209

JS/JQ to get phone verification code Countdown effect