JS meniru kod pelaksanaan fungsi log masuk grid sembilan persegi pada kemahiran phone_javascript mudah alih

Saya tidak mempunyai projek untuk dilakukan baru-baru ini, jadi saya menulis demo kecil pada masa lapang saya, saya ingin berkongsi di platform Script House untuk rujukan anda.

Logik fungsi dan kaedah dianotasi dalam kod. Jadi sila lihat kod secara langsung.

Kesannya adalah seperti berikut:

Tanpa berlengah lagi, mari terus ke kod:

bahagian js:

Mula-mula, kami melukis dua grid sembilan segi empat sama, satu untuk log masuk dan menetapkan kata laluan gelongsor buat kali pertama, dan satu lagi untuk menetapkan kata laluan gelongsor sekali lagi. Ia digunakan untuk membandingkan dengan kata laluan gelongsor yang dimasukkan untuk yang pertama masa untuk menentukan sama ada kedua-dua kata laluan itu sah

Grid sembilan persegi pertama

$("#gesturepwd").GesturePasswd({
backgroundColor: "#252736", //背景色
color: "#FFFFFF", //主要的控件颜色
roundRadii: 25, //大圆点的半径
pointRadii: 6, //大圆点被选中时显示的圆心的半径
space: 30, //大圆点之间的间隙
width: 240, //整个组件的宽度
height: 240, //整个组件的高度
lineColor: "#00aec7", //用户划出线条的颜色
zindex: 100 //整个组件的css z-index属性
}); 

Gunakan kaedah yang sama untuk melukis grid sembilan persegi kedua

///加载第二个
function getur() {
$("#gesturepsa").GesturePasswd({
backgroundColor: "#252736", //背景色
color: "#FFFFFF", //主要的控件颜色
roundRadii: 25, //大圆点的半径
pointRadii: 6, //大圆点被选中时显示的圆心的半径
space: 30, //大圆点之间的间隙
width: 240, //整个组件的宽度
height: 240, //整个组件的高度
lineColor: "#00aec7", //用户划出线条的颜色
zindex: 100 //整个组件的css z-index属性
});
} 

bahagian html:

<div>
<center><br><br>
<div id="gesturepwd"></div> 
<div id="gesturepsa" style="display:none"></div>
</center>
</div> 

Apabila pengguna log masuk, pangkalan data ditanya melalui lapisan logik perniagaan untuk melihat sama ada pelanggan telah menetapkan kata laluan Jiugongge Jika ia ditetapkan, kaedah tambah() dipanggil, dan jika ia tidak ditetapkan, kata laluan kaedah upup() dipanggil.

<script>
$(function () {
var urlinfo = window.location.href;
var UserName = urlinfo.split("_")[1];　
$.ajax({
type: "POST",
url: "../../Home/Details",
dataType: 'json',
anyc: false,
data: { UserName: UserName },
success: function (data) {
if (data.msg == "True") {
$("#pass").text(data.pass);
alert("请输入手势密码!")
add();
}
else {
alert("请设置手势密码!")
upup();
}
}
})
})
</script> 

Apabila pengguna telah menetapkan had masa, kami melakukan operasi berikut (panggil kaedah tambah()):

///设置过手势密码的用户
function add() {
$("#gesturepwd").on("hasPasswd", function (e, passwd) {
var result;
if (passwd == $("#pass").text()) {
result = true;
}
else {
result = false;
}
if (result == true) {
$("#gesturepwd").trigger("passwdRight");
setTimeout(function () {
//密码验证正确后的其他操作，打开新的页面等。。。
//alert("密码正确！")
$("#gesturepwd").hide();
$("#Indexs").show();;
}, 500); //延迟半秒以照顾视觉效果
}
else {
$("#gesturepwd").trigger("passwdWrong");
//密码验证错误后的其他操作。。。
}
});
} 

Di sini kita boleh mendapatkan kata laluan yang diluncurkan oleh pelanggan dalam grid sembilan segi empat, mengeluarkannya (iaitu passwd), dan membandingkannya dengan kata laluan dalam pas elemen tersembunyi Jika ia sama, pergi ke yang seterusnya langkah, iaitu log masuk berjaya. Kerana saya meletakkan semua kata laluan dalam kubah secara langsung dalam elemen halaman, ini tidak disyorkan dalam pembangunan sebenar. Sebaik-baiknya membandingkannya di latar belakang Jika anda ingin melakukan ini, sila menyulitkannya sebelum beroperasi. Jika pengguna menyediakannya buat kali pertama, kami memanggil kaedah upup

///没有设置过手势密码用户
function upup() {
///第一次设置
$("#gesturepwd").on("hasPasswd", function (e, passwd) {
$("#pass").text(passwd)
alert("请再次输入!");
getur();
$("#gesturepwd").hide();
$("#gesturepsa").show();
});
///第二次设置
Recursive();
}

Di sini kami mendapat kata laluan yang ditetapkan oleh pengguna buat kali pertama dan menetapkannya kepada elemen pas.

Kemudian panggil kaedah Rekursif

///递归（循环调用自己）
function Recursive() {
$("#gesturepsa").on("hasPasswd", function (e, passwd) {
var urlinfo = window.location.href;
var UserName = urlinfo.split("_")[1];
if (passwd == $("#pass").text()) {
$.ajax({
type: "POST",
url: "../../Home/GrtturePassword",
dataType: 'json',
anyc: false,
data: { GesturePassword: passwd, UserName: UserName },
success: function (data) {
alert(data);
$("#gesturepsa").hide();;
$("#Indexs").show();;
}
})
}
else {
$("#gesturepsa").trigger("passwdWrong");
alert("两次密码不一致，请重新输入!");
$("#gesturepsa").remove();
$("#gesturepwd").after("<div id='gesturepsa'></div>")
getur();
Recursive();
}
});
} 

Kami akan membandingkan kata laluan yang ditetapkan untuk kali kedua dengan kali pertama Jika ia adalah sama, kami akan menghantar kata laluan ke latar belakang melalui ajax dan menyimpan kata laluan. Jika kedua-dua input berbeza, kami akan memanggil diri kami semula melalui rekursi untuk perbandingan sehingga ia lulus Sudah tentu, anda juga boleh menyediakan tiga tetapan semula yang berbeza atau sesuatu.

Memandangkan fungsi ini sangat mudah, saya tidak akan menerangkannya secara terperinci Jika anda tidak faham atau ingin merujuk kepada kod sumber, sila tinggalkan mesej dan saya akan menulis kubah untuk dikongsi dengan anda.