Saya baru -baru ini membuat proyek di mana kebutuhan proyek melibatkan kode verifikasi nomor ponsel. Artinya, ketika pengguna mengklik untuk mendapatkan kode verifikasi, kami akan mengirim pesan ke ponsel pengguna, dan tombol Countdown akan muncul, yang sangat mirip dengan efek pembayaran ponsel Alipay. Izinkan saya membagikan dua kode implementasi dengan Anda di bawah ini.
Bagaimana cara mendapatkan kode verifikasi ponsel?
Xiaoyue tidak tahu platform mana yang Anda gunakan untuk mendapatkan kode verifikasi, tetapi memberi tahu Anda platform mana yang saya peroleh.
Leancloud: https://leanscloud.cn/
Dokumentasi: https://leanccloud.cn/docs/sms_guide-js.html
Pada platform ini, Anda perlu mendaftarkan akun dan mengatur informasi Anda sendiri di pengaturan untuk beroperasi sesuai dengan dokumen. Saya tidak akan banyak bicara tentang itu di sini. Sebagian besar dari mereka mengoperasikan beberapa antarmuka di latar belakang. Jika kita memiliki kemampuan di ujung depan, kita dapat mencoba menulis antarmuka di PHP sendiri. (Saya tidak bisa menulis malas.)
Biasanya ada dua antarmuka:
1. Kirim permintaan verifikasi (ini akan memungkinkan ponsel Anda diverifikasi oleh SMS)
2. Mengembalikan data untuk memverifikasi apakah nomor ponsel konsisten dan memverifikasi apakah itu konsisten.
Ini dapat diimplementasikan sesuai dengan antarmuka singa pengepungan backend.
Pekerjaan halaman front-end
Kode berikut adalah halaman yang ditampilkan pada gambar di atas
<dv> <div> <span> <mmg src = "img/close.png"> </span> <v div> <p> <span> Nomor ponsel: </span> <input type = "tel" id = "ponsel" onkeyup = "value = value.replace (/[^/w /.// 5, '')" nething = " Nomor "> </p> <p> <span> Kode verifikasi: </span> <input type =" tel "placeholder =" Masukkan kode verifikasi "> <span> Dapatkan kode verifikasi </span> </p> <v> Kirimkan Anda sesegera mungkin setelah permintaan berhasil </p> <p> <p> Kami akan tidak akan memberikan Anda sesegera mungkin setelah permintaan berhasil </p> <p> <p> <p> <p> Kami akan tidak akan memberikan Anda sesegera mungkin <p>. </p> <div> Saya tahu </div> </div> </div> </div>
Verifikasi apakah nomor ponselnya benar
// Periksa nomor ponsel // input reguler yang ditulis pada halaman ditulis dalam jQuery.extend ({checkMobileno: function (str) {var re =/^1 [3 | 7 | 5 | 8]/d {9} $/; if (re.test (str)) {return true;} lain {return false;}}}};JS/JQ Bagian Menangani Permintaan Verifikasi SMS
// Kirim kode verifikasi ke ponsel $ .AJAX ({type: 'get', url: "antarmuka yang disediakan oleh latar belakang Anda" + seluler, // yaitu, antarmuka di atas 1Success: function (data, status) {if (data.errcode == 0) {"send"); $ (". Code1"). ACRIBED == 0) {"Send"); $ (". Code1"). ACRIBED ("DISABDED (" DISABED ("DISABLED,", "); $ (". Code1). "disabled");$(".code1").css("background-color", "#b4b2b3");//The following is the effect code to implement countdown 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 = tanggal baru (date.parse (time.replace (/ -/g, "/")). 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 menit = math.floor ((sys_second / 3600) % 24); var menit = math.floor ((sys_second / 3600) % 24); var menit = math.floor ((sys_second / 3600) % 24); var menit = math.floor ((sys_second / 3600) % 24); var menit = math.floor (SYS_SECOND / 3600); Math.floor (sys_second % 60); var time_text = ''; if (day> 0) {time_text + = day + 'day';} if (hour> 0) {if (hour <10) {hour = '0' hour;} time_text + hour + hour 'hour';} {Minute> 0) {Minute; + = menit + 'menit';} if (kedua> 0) {if (kedua <10) {detik = '0' + kedua;} time_text + = kedua + 'kedua';} $ (id) .text (time_text);} lain {clearinterval (timer); $ (". Code1"). ATTRIFIFIFIMNE ". kode '); $ (". Code1"). CSS ("Latar Belakang", "#F67A62");}}, 1000);Mengirimkan informasi ke server
// Apakah kode verifikasi konsisten dengan kode verifikasi yang dikirim oleh ponsel $ .Ajax ({type: 'get', url: "Interface 2", Success: function (data, status) {if (data.errcode == 0) {// Kirimkan informasi ke server $ .Ajax ({type: 'post', url: "Kirimkan informasi ke server $ .Ajax ({type: 'POST', URL:" Json.stringify ({// data di sini untuk melihat kebutuhan Anda untuk menulis "Project_id": pid, "phone": seluler, "perangkat": d}), sukses: fungsi (data, status) {if (data.errcode == 0) {$ ('. Page1'). Hide (); $ ('. Sekali! ");}}, kesalahan: fungsi (data, status) {waspada (data.errmsg);}});} else {waspada (" Kode verifikasi salah! ");}}, kesalahan: fungsi (data, status) {waspada (status);}});});Di atas adalah deskripsi lengkap efek hitung mundur JS/JQ yang diperkenalkan oleh editor kepada Anda pada efek Countdown kode verifikasi ponsel gratis. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!