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.

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

<Divclass= "Pop">    <Divclass= "Con">        <spanclass= "Close"><imgsrc= "Img/close.png"></span>        <Divclass= "Page1">           <Pclass= "Info">               <spanclass= "title">Phone Number:</span>               <inputtype= "Tel"class= "Tel"ID= "mobile"onkeyup= "Value=value.replace (/[^\w\.\/]/ig,& #39;& #39;)"Required=""placeholder= "Please enter your phone number">           </P>           <Pclass= "Info">              <spanclass= "title">Verification Code:</span>              <inputtype= "Tel"class= "Code"placeholder= "Enter Verification Code">              <spanclass= "Code1">Get Verification Code</span>           </P>           <Divclass= "Demand Demand2"style= "width:70%; margin-top:20px;">Submit</Div>       </Div>       <Divclass= "Page2">           <Pclass= "P1">Submit Success</P>           <Pclass= "P2">We will be after the successful request</P>           <Pclass= "P2">The first time to inform you!</P>           <Divclass= "Demand Demand3"style= "width:80%; margin-top:20px; margin-bottom:10px;">I know.</Div>       </Div>    </Div></Div>

Verify that the phone number is correct

// Check the phone number // The input of the page is written by calling the method directly below it. jquery.extend ({     function(str) {         var re =/^1[3|7|5|8]\d{9}$/;          if  (Re.test (str)) {             returntrue;          Else {             returnfalse;}}}     );

JS/JQ Partial processing send SMS Verification request

Send a verification code to the phone

$.ajax ({type:' GET ', URL:"Interface provided by your backend" + mobile,//that is, the above interface 1Successfunction(data, status) {if(data.errcode==0) {alert ("Sent"); $(". Code1"). attr ("Disabled", "disabled"); $(". Code1"). CSS ("Background-color", "#b4b2b3"));//here is the effect code to implement the Countdown varD =NewDate (); D.setseconds (D.getseconds ()+ 59); varm = d.getmonth () + 1; varTime = d.getfullyear () + '-' + M + '-' + d.getdate () + ' + d.gethours () + ': ' + d.getminutes () + ': ' +d.getseconds ();varid = ". Code1"; varEnd_time =NewDate (Date.parse (Time.replace (/-/g, "/")) . GetTime (),//month is the actual month-1Sys_second = (End_time-NewDate (). GetTime ())/1000; varTimer = SetInterval (function() { if(Sys_second > 1) {Sys_second-= 1; varDay = Math.floor ((sys_second/3600)/24); varhour = Math.floor ((sys_second/3600)% 24); varminute = Math.floor ((SYS_SECOND/60)% 60); varSecond = Math.floor (sys_second% 60); varTime_text = ' '; if(Day > 0) {Time_text+ = day + ' days '; } 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 + ' min '; } if(Second > 0) { if(Second < 10) {Second= ' 0 ' +second;} Time_text+ = second + ' s '; } $ (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) { //submitting information to the server$.ajax ({type:' POST ', URL:"Submit to the server the information you requested to fill out the interface.", data:JSON.stringify ({//Data here to see your needs according to the data of the interface to write"PROJECT_ID": PID,"Phone": Mobile,"Device":d}), Success:function(data, status) {if(data.errcode==0) { $('. Page1 '). Hide (); $('. Page2 '). Show (); }Else{alert ("Submit failed, please try again!"); }}, 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. In doubt can come to ask Xiao Yue, want to find the case source for the moon to put, after theDEMO opened please add QQ Group in the group files can download Oh!

JS/JQ to get phone verification code Countdown effect