Недавно я создал проект, в котором требования проекта включают код проверки номера мобильного телефона. То есть, когда пользователь нажимает, чтобы получить код проверки, мы отправим сообщение на мобильный телефон пользователя, и появится кнопка обратного отсчета, которая очень похожа на платежный эффект мобильного телефона Alipay. Позвольте мне поделиться двумя кодами реализации с вами ниже.
Как получить код проверки мобильных телефонов?
Xiaoyue не знает, какую платформу вы используете для получения кода проверки, но сообщает, на какой платформе я ее получил.
LeanCloud: https://leancloud.cn/
Документация: https://leancloud.cn/docs/sms_guide-js.html
На этой платформе вам необходимо зарегистрировать учетную запись и установить собственную информацию в настройках для работы в соответствии с документом. Я не скажу много об этом здесь. Большинство из них управляют некоторыми интерфейсами на заднем плане. Если у нас есть способность в передней части, мы можем попытаться написать интерфейсы в PHP сами. (Я не могу писать ленивый.)
Обычно есть два интерфейса:
1. Отправьте запрос на проверку (это позволит проверить ваш телефон SMS)
2. Верните данные, чтобы убедиться, что номер мобильного телефона является согласованным, и убедитесь, что он последовательным.
Это может быть реализовано в соответствии с интерфейсом бэкэнд -осадного левца.
Фронтальная страница работа
Следующий код - это страница, показанная на картинке выше
<div> <div> <pran> <img src = "img/close.png"> </span> <d Div> <p> <pan> Мобильный номер: </span> <input type = "tel" = "mobile" onkeyup = "value = value.replace (/[^/w /.///nic Код: </span> <input type = "tel" Placeholder = "Введите код проверки"> <pan> Получить код проверки </span> </p> <div> отправить </div> <div> <p> Отправить успешно </p> <p> Мы будем уведомлять вас как можно скорее после успешного запроса </p> <p>! </p> <div> Я знаю </div> </div> </div> </div>
Убедитесь, правильный ли номер мобильного телефона
// Проверьте номер мобильного телефона // Регулярный ввод, записанный на странице, записывается в 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 обрабатывает запрос на проверку SMS.
// Отправить код проверки на мобильный телефон $ .ajax ({type: 'get', url: "Интерфейс, предоставленный вашим фоном" + mobile, // то есть, вышеуказанный интерфейс 1success: function (data, status) {if (data.errcode == 0) {alert ("sent"); ". «Отключить»); $ (". Code1"). CSS ("фоновое цветное", "#b4b2b3"); // Ниже приведено код эффекта для реализации обратного отсчета VAR d = new Date (); D.SetSeconds (d.GetSeconds () + 59); var m = d.getMonth () + 1; var-time = d.getseeAr () + ' + m +' + ' +' + ' +' + '- +' + ' +' + ' +' + ' +'- + ' +'- + ' +'- + ' +'- + ' +'- + ' +' + d.getmonth () + 1; d.gethours () + ':' + d.getminutes () + ':' + d.getseconds (); var id = ".code1"; var end_time = новая дата (date.parse (время. 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 mining = floor (sys_second / 60) % 60); 60); var time_text = ''; if (day> 0) {time_text + = day + 'day';} if (hour> 0) {if (час <10) {час = '0' + час;} time_text + = hour + 'hour';} if (минута> 0) {if (minute <10) {минута = '0' + minate;} time_text + = minot + = minot + = inment '; {if (second <10) {second = '0' + second;} time_text + = second + 'second';} $ (id) .text (time_text);} else {clearInterval (timer); $ (". Code1"). attr ("Отключен", false); $ (". Code1"). "#f67a62");}}, 1000);Отправить информацию на сервер
// соответствует ли проверка кода проверки с кодом проверки, отправленного мобильным телефоном $ .ajax ({type: «get», url: «Интерфейс 2», успех: функция (данные, статус) {if (data.errcode == 0) {// Отправить информацию на сервере $ .ajax ({type: 'post', url: «Отправить интерфейс информации, который вы попросили, чтобы наполнить сервер. // данные здесь, чтобы увидеть ваши потребности в том, чтобы написать «project_id»: pid, «phone»: mobile, «device»: d}), успех: function (data, status). {alert (data.errmsg);}});} else {alert ("код проверки неверен!");}}, ошибка: function (data, status) {alert (status);}});});Выше приведено полное описание эффекта обратного отсчета JS/JQ, введенного редактором для бесплатного эффекта обратного отсчета кода кода мобильного телефона. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!