Recientemente hice un proyecto donde las necesidades del proyecto involucran el código de verificación del número de teléfono móvil. Es decir, cuando el usuario haga clic para obtener el código de verificación, enviaremos un mensaje al teléfono móvil del usuario, y aparecerá un botón de cuenta regresiva, que es muy similar al efecto de pago del teléfono móvil Alipay. Permítanme compartir dos códigos de implementación con usted a continuación.
¿Cómo obtener el código de verificación del teléfono móvil?
Xiaoyue no sabe en qué plataforma usa para obtener el código de verificación, pero le dice en qué plataforma la obtuve.
LeanCloud: https://leancloud.cn/
Documentación: https://leancloud.cn/docs/sms_guide-js.html
En esta plataforma, debe registrar una cuenta y establecer su propia información en la configuración para operar de acuerdo con el documento. No diré mucho al respecto aquí. La mayoría de ellos operan algunas interfaces en el fondo. Si tenemos la capacidad en el frente, podemos intentar escribir interfaces en PHP por nosotros mismos. (No puedo escribir perezoso).
Por lo general, hay dos interfaces:
1. Envíe una solicitud de verificación (esto permitirá que su teléfono sea verificado por SMS)
2. Devuelva datos para verificar si el número de teléfono móvil es consistente y verificar si es consistente.
Se puede implementar de acuerdo con la interfaz de Backend Siege Lion.
Trabajo de la página frontal
El siguiente código es la página que se muestra en la imagen de arriba
<Div> <div> <span> <img src = "img/close.png"> </span> <div> <p> <span> número móvil: </span> <input type = "tel" id = "móvil" onkeyUp = "valor = valor.replace (/[^/w /.//font>/ ig, '')" requerido = " Número "> </p> <p> <span> Código de verificación: </span> <input type =" Tel "placeholder =" Ingrese el código de verificación "> <span> Obtenga el código de verificación </span> </p> <div> Envir </div> <div> <p> ¡Envíe con éxito </p> <p> lo notificaremos lo antes posible después de la solicitud es exitosa </p> <p>! </p> <div> Sé </div> </div> </div> </div>
Verifique si el número de teléfono móvil es correcto
// verifique el número de teléfono móvil // La entrada regular escrita en la página está escrita en jquery.extend ({checkMobileno: function (str) {var re =/^1 [3 | 7 | 5 | 8]/d {9} $/;;JS/JQ MANEJES DE PARTA ENTRANDO SOLICITUD DE VERIFICACIÓN SMS
// Enviar código de verificación al teléfono móvil $ .AJAX ({type: 'get', url: "interfaz proporcionada por su fondo" + móvil, // es, la interfaz anterior 1success: function (data, status) {if (data.errcode == 0) {alerta ("enviado"); $ (". Code1"). "discapacitado"); $ (". Code1"). CSS ("Color de fondo", "#B4B2B3"); // El siguiente es el código de efecto para implementar Countdown var d = new Date (); d.setseconds (d.getSeconds () + 59); var m = d.getmonth () + 1; var tiempo = d.getfulfyfulfyear () + ' + m); d.gethours () + ':' + d.getminutes () + ':' + d.getSeconds (); var id = ".code1"; var end_time = new date (date.parse (tiempo.replace (/ -/g, "/")).getTime():// mes es el mes real -1sys_second = (end_time -new date ().). temporizador = 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 minuto = math.floor ((sys_second / 60) % 60); Math.floor (sys_second % 60); var time_text = '' '; if (day> 0) {time_text + = day +' day ';} if (hora> 0) {if (hora <10) {hora =' 0 ' + hora;} Time_text + = Hour +' Hour ';} if (minuto> 0) {if (minuto <10) {minuto = =' 0 '0' 0 '0' 0 ''_''_TOXT;} + = minuto + 'minuto';} if (segundo> 0) {if (segundo <10) {segundo = '0' + segundo;} Time_text + = Second + 'Second';} $ (id) .Text (Time_text);} else {ClearInterval (Temporante); $ (". Code1"). Attr ("discapacitado", falso); $ ($ ("." Code1 "). código '); $ (". Code1"). CSS ("Color de fondo", "#F67A62");}}, 1000);Enviar información al servidor
//Whether the verification code is consistent with the verification code sent by the mobile phone $.ajax({type: 'GET',url: "Interface 2",success: function(data, status) {if (data.errcode==0) {//Submit information to the server $.ajax({type: 'POST',url: "Submit the information interface you asked for to fill in to the server",data: Json.Stringify ({// datos aquí para ver sus necesidades para escribir "Project_id": Pid, "Phone": Mobile, "dispositivo": d}), éxito: function (data, status) {if (data.errcode == 0) {$ ('. una vez! ");}}, error: function (data, status) {alert (data.errmsg);}});} else {alert (" El código de verificación es incorrecto! ");}}, error: function (data, status) {alert (status);}});});Lo anterior es la descripción completa del efecto de cuenta regresiva JS/JQ introducido por el editor en el efecto de cuenta de código de verificación de teléfono móvil gratuito. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!