Saya belum melakukan proyek apa pun baru -baru ini. Saya tidak punya waktu untuk menulis demo kecil. Saya di sini untuk membaginya dengan platform Wulin Network untuk referensi Anda. Saya akan memaafkan saya jika saya tidak menulis artikel ini dengan baik!
Fungsi dan logika metode dikomentari dalam kode. Jadi silakan baca kodenya secara langsung.
Efeknya adalah sebagai berikut:
Tanpa basa -basi lagi, cukup unggah kode:
Bagian JS:
Pertama, kami menggambar dua kisi sembilan-dish, satu untuk login dan pengaturan kata sandi geser pertama, dan yang lainnya untuk pengaturan kata sandi geser lagi, yang digunakan untuk membandingkan dengan kata sandi geser yang dimasukkan untuk pertama kalinya untuk menentukan apakah kata sandi konsisten antara dua kali.
Sembilan klien pertama
$("#gesturepwd").GesturePasswd({backgroundColor: "#252736", //Background color: "#FFFFFF", //Main control color roundRadii: 25, //The radius of the large dot pointRadii: 6, //The radius of the center displayed when the large dot is selected is space: 30, //The gap between the large dot width: 240, // Tinggi lebar seluruh komponen adalah 240, // Tinggi seluruh komponen linecolor: "#00aec7", // warna garis zindex pengguna: 100 // atribut css z-index dari seluruh komponen});Menggambar kisi sembilan kandang kedua dengan cara yang sama
/// Muat fungsi kedua getur () {$ ("#gesturepsa"). Gesturepasswd ({backgroundColor: "#252736", // warna latar belakang: "#ffffff", // warnai utama roundradii: 25,/Radius dari pointradi pointadii yang besar: 6, 6, 6,/6, // celah antara lebar titik besar: 240, // Lebar seluruh tinggi komponen: 240, // ketinggian seluruh linecolor komponen: "#00aec7", // Warna seluruh garis zindex: 100 // Atribut CSS Z-Index dari seluruh komponen});}Bagian html:
<div> <senter> <br> <br> <div id = "gesturepwd"> </div> <div id = "gesturepsa" style = "display: none"> </div> </senter> </div>
Ketika pengguna masuk, database ditanya melalui lapisan logika bisnis untuk melihat apakah pelanggan menetapkan kata sandi sembilan-grid. Jika diatur, metode add () dipanggil, dan jika tidak diatur, metode upup () dipanggil.
<script> $ (function () {var urlinfo = window.location.href; var username = urlinfo.split ("_") [1]; $ .Ajax ({type: "Post", URL: ".././home/Details",daType: 'json', anyc: false: false: found: false: {oSername (data.msg == "true") {$ ("#pass"). Teks (data.pass); alert ("Harap masukkan kata sandi gesture!") add ();} else {alert ("Harap atur kata sandi gesture!") upup ();}}})}) </script>Ketika pengguna telah mengaturnya, kami melakukan operasi berikut (hubungi metode add ()):
/// Pengguna yang telah menetapkan fungsi kata sandi gesture add () {$ ("#gesturepwd"). On ("haspasswd", function (e, passwd) {var result; if (passwd == $ ("#pass"). Text ()) {hasil = true;} else {hasil = false;} if (rancangan == {$ ("#gesturepwd"). pemicu ("passwdright"); setTimeout (function () {// Operasi lain setelah verifikasi kata sandi benar, buka halaman baru, dll. // Peringatan ("Kata sandi benar!") ("Toing dari Gesturepwd"). Hide (); $ ("#index"). Efek} {$ ("#gesturepwd").Di sini kita bisa mendapatkan kata sandi dari pelanggan yang meluncur ke dalam grid sembilan-grid, mengeluarkannya (mis. Passwd), dan kami membandingkannya dengan kata sandi di Hidden Element Pass. Jika ini masuk ke langkah berikutnya, login berhasil. Karena saya meletakkan semua kata sandi di halaman secara langsung di elemen halaman. Ini tidak direkomendasikan dalam pengembangan aktual. Yang terbaik adalah membandingkan di latar belakang. Jika Anda menginginkan ini, silakan mengenkripsi dan kemudian mengoperasikannya. Jika pengguna mengaturnya untuk pertama kalinya, kami memanggil metode UPUP
/// Kata sandi Gesture belum ditetapkan UPUP Fungsi Pengguna () {/// Pengaturan pertama kali $ ("#gesturepwd"). On ("haspasswd", function (e, passwd) {$ ("#pass"). Teks (passwd) waspada ("Harap masukkan Sekali lagi! "); getur (); $ ("#gesturepwd "). hide (); $ ("#gesturepsa "). show ();}); /// yang kedua kali pengaturan rekursif ();}Di sini kami mendapatkan kata sandi yang ditetapkan oleh pengguna untuk pertama kalinya untuk menetapkannya ke elemen pass.
Kemudian panggil metode rekursif
/// Recursive (looping itu sendiri) fungsi rekursif () {$ ("#gesturepsa"). On ("haspasswd", function (e, passwd) {var urlinfo = window.location.href; var username = urlinfo.split ("_") [1]; if (pass = Urlinfo.split. " {$ .Ajax ({type: "Post", url: "../../home/grtturepassword".dataType: 'json', anyc: false, data: {gesturepassword: passwd, nama pengguna: username}, keberhasilan: fungsi (data) {alert (data); $ ("#gesturepsa"). hide () ;; $ ("#indexs"). show () ;;}})} else {$ ("#gesturepsa"). Trigger ("passwdwrong"); waspada masuk kembali! "); $ ("#gesturepsa "). Remove (); $ ("#gesturepwd "). Setelah (" <div id = 'gesturepsa'> </div> ") getur (); recursive ();}});}Kami membandingkan kata sandi yang ditetapkan untuk kedua kalinya dengan pertama kalinya. Jika hal yang sama benar, kami akan meneruskan kata sandi ke latar belakang melalui Ajax dan menyimpan kata sandi. Jika input berbeda untuk dua kali, kita akan membandingkan diri kita dengan rekursif sampai kita lewat. Tentu saja, Anda juga dapat mengatur reset yang berbeda 3 kali.
Karena fungsinya sangat sederhana, saya tidak akan menjelaskannya secara rinci. Jika Anda tidak mengerti atau ingin merujuk ke kode sumber, silakan tinggalkan pesan. Saya akan menulis kubah untuk dibagikan dengan Anda.