JS/JQ realize free access to phone verification code countdown effect _javascript Skills

Recently made a project, one of the project needs involved in the mobile phone number verification code, that is, when the user clicks to obtain the verification code, we will send a message to the user's phone, and then there will be a countdown button, very much like Alipay mobile payment effect, below I give you share two implementation code.

How to obtain the Phone authentication code?

I don't know what platform we are using to get the verification code, but tell us which platform I am getting.

Leancloud:https://leancloud.cn/

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

In this platform first to register an account, in the settings set up their own information in accordance with the document to operate on it can be said here, most of the backstage to operate some interface, we have the ability to try to use PHP to write the interface. (Lazy I can't write.) ）

Typically two interfaces:

1. Send verification request (so that your mobile phone will be subject to SMS verification OH)

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

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

Work on the front page

The following code is the page shown in the previous illustration

 <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, '") "required=" " Placeholder= "Please enter your mobile number" > </p> <p class= "info" > <span class= "title" > Authenticode code:</span> <input Type= "Tel" class= "code" placeholder= "Input verification Code" > <span class= "Code1" > Obtaining Authenticode Code </span> </p> <div Class = "Demand Demand2" style= "width:70%; margin-top:20px; " > Submit </div> </div> <div class= "Page2" > <p class= "P1" > Commit success </p> <p class= "P2" > We will notify you after the successful </p> <p class= "P2" > The first time! </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

Check the phone number
//page input write directly below the direct call method can be
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 authentication request

Send authentication code to cell phone $.ajax ({type: ' Get ', url: "Your backend provided interface" + Mobile,//That is 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 (). GE
Ttime ())/1000; var timer = setinterval (function () {if (Sys_second > 1) {sys_second-= 1; var day = Math.floor (sys_second/3600)/
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 + + ' days ';} if (Hour > 0) {if (hour <) {hour = ' 0 ' + hour;
} Time_text + = Hour + ' hour ';  } if (Minute > 0) {if (minute <) {minute = ' 0 ' + minute;} Time_text + = minute + ' cent ';} 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 authentication 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 cell phone sent 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 your requested information interface to the server",
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 ("Commit failed, please try it once!");
}
,
error:function (data, status) {
alert (data.errmsg);
}
});
} else{
Alert ("Verify code is incorrect!)" ");
}}
,
error:function (data, status) {
alert (status);
}
);

The above is a small set to introduce the JS/JQ to realize free phone verification code Countdown effect of all the narration, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!