Recentemente, fiz um projeto em que as necessidades do projeto envolvam o código de verificação do número de telefone celular. Ou seja, quando o usuário clicar para obter o código de verificação, enviaremos uma mensagem para o telefone celular do usuário e um botão de contagem regressiva aparecerá, o que é muito semelhante ao efeito de pagamento do telefone celular Alipay. Deixe -me compartilhar dois códigos de implementação com você abaixo.
Como obter o código de verificação do celular?
A Xiaoyue não sabe em qual plataforma você usa para obter o código de verificação, mas informa em qual plataforma eu a obtive.
LeanCloud: https://leancloud.cn/
Documentação: https://leancloud.cn/docs/sms_guide-js.html
Nesta plataforma, você precisa registrar uma conta e definir suas próprias informações nas configurações para operar de acordo com o documento. Não vou dizer muito sobre isso aqui. A maioria deles opera algumas interfaces em segundo plano. Se tivermos a capacidade no front -end, podemos tentar escrever interfaces no PHP sozinhos. (Não posso escrever preguiçosos.)
Geralmente existem duas interfaces:
1. Envie uma solicitação de verificação (isso permitirá que seu telefone seja verificado pelo SMS)
2. Retorne os dados para verificar se o número do telefone celular é consistente e verifique se é consistente.
Pode ser implementado de acordo com a interface do leão do cerco de back -end.
Trabalho de página front-end
O código a seguir é a página mostrada na figura acima
<div> <div> <mpan> <img src = "img/close.png"> </span> <div> <p> <pan> número móvel: </span> <input type = "tel" id = "móvel" onkeyup = "requerir = value.replace (/[^/w /.////2///27 number"></p><p><span>Verification code:</span><input type="tel" placeholder="enter the verification code"><span>Get the verification code</span></p><div>Submit</div><div><p>Submit successfully</p><p>We will notify you as soon as possible after the request is successful</p><p>! </p> <div> eu sei </div> </div> </div> </div>
Verifique se o número do telefone celular está correto
// Verifique o número do telefone celular // A entrada regular escrita na página é escrita em jQuery.extend ({checkMobileno: function (str) {var re =/^1 [3 | 7 | 5 | 8]/d {9} $/; if (re.test (str)) {retornar true;} else {return false;}};JS/JQ Part lida com a solicitação de verificação de SMS
// Envie o código de verificação para o telefone celular $ .ajax ({type: 'get', url: "interface fornecida pelo seu plano de fundo" + móvel, // ou é, a interface acima 1Success: function (dados, status) {if (data.errcode == 0) {alert "enviada"); $ (". Code1"). "Desativado"); $ (". Code1"). CSS ("colorido de fundo", "#B4B2B3"); // A seguir, é apresentado o código de efeito para implementar a contagem regressiva var d = new Date (); D.SeSeSeconds (D.getSeconds () + 59); var m = d.getMonth () + 1; d.gethours () + ':' + d.getminutes () + ':' + d.getSeconds (); var id = ".code1"; var end_time = new Date (date.parse (the there.replace (/ -/g, "/" /" (final) ()/()/()/()/()/()/() ()/get) setInterval (function () {if (sys_second> 1) {sys_second -= 1; var dia = math.floor ((sys_second / 3600) / 24); var hour = math.floor ((sys_s_second / 3600) % 24); var 60 minuto = math.floor ((sys_s_s_s_s_s_s_sec / 3600); % 60); var time_text = ''; if (dia> 0) {time_text + = dia + 'dia';} if (hora> 0) {if (hora <10) {hour = '0' + hora;} time_text + = hora + 'hora';} if (minuto> 0) {se (minuto <10) {{ > 0) {if (segundo <10) {Second = '0' + Second;} time_text + = segundo + 'segundo';} $ (id) .text (time_text);} else {clearInterval (timer); $ (". Code1"). Att ("desabiled", false); $ (". Code1"). código '); $ (". Code1"). CSS ("colorido de fundo", "#f67a62");}}, 1000);Envie informações ao servidor
// Se o código de verificação é consistente com o código de verificação enviado pelo telefone celular $ .ajax ({type: 'get', url: "interface 2", sucesso: function (dados, status) {if (data.errcode == 0) {// enviar informações para o servidor $. Json.stringify ({// dados aqui para ver suas necessidades para escrever "project_id": pid, "telefone": móvel, "dispositivo": d}), sucesso: function (dados, status) {if (data.errcode == 0) {$ ('. uma vez! ");}}, erro: function (dados, status) {alert (data.errmsg);}});} else {alert (" código de verificação está incorreto! ");}}, erro: function (dados, status) {alert (status);}});});O exposto acima é a descrição completa do efeito de contagem regressiva JS/JQ introduzido pelo editor para você no efeito de contagem regressiva do código de verificação do telefone celular gratuito. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!