JS imite le code d'implémentation de la fonction de connexion à la grille à neuf carrés sur les compétences de téléphone mobile_javascript

Je n'ai pas de projets à faire récemment, j'ai donc écrit une petite démo pendant mon temps libre. J'aimerais la partager sur la plateforme Script House pour votre référence. Veuillez me pardonner la mauvaise rédaction de cet article !

La logique des fonctions et des méthodes est annotée dans le code. Alors s'il vous plaît, regardez simplement le code directement.

L'effet est le suivant :

Sans plus attendre, passons directement au code :

partie js :

Tout d'abord, nous dessinons deux grilles de neuf carrés, une pour se connecter et définir le mot de passe coulissant pour la première fois, et l'autre pour définir à nouveau le mot de passe coulissant. Elle est utilisée pour comparer avec le mot de passe coulissant saisi pour la première fois. il est temps de déterminer si les deux mots de passe sont valides

La première grille de neuf carrés

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

Utilisez la même méthode pour dessiner la deuxième grille de neuf carrés

///加载第二个
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属性
});
} 

partie html :

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

Lorsque l'utilisateur se connecte, la base de données est interrogée via la couche de logique métier pour voir si le client a défini un mot de passe Jiugongge. S'il est défini, la méthode add() est appelée, et si elle n'est pas définie, la méthode add() est appelée. La méthode upup() est appelée.

<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> 

Lorsque l'utilisateur a fixé la limite de temps, nous effectuons les opérations suivantes (appelons la méthode add()) :

///设置过手势密码的用户
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");
//密码验证错误后的其他操作。。。
}
});
} 

Ici, nous pouvons obtenir le mot de passe que le client glisse dans la grille à neuf carrés, le retirer (c'est-à-dire passwd) et le comparer avec le mot de passe dans l'élément caché pass. S'ils sont identiques, passez au suivant. étape, c'est-à-dire que la connexion est réussie. Parce que je mets tous les mots de passe du dôme directement dans les éléments de la page, cela n'est pas recommandé dans le développement réel. Il est préférable de les comparer en arrière-plan. Si vous souhaitez faire cela, veuillez les chiffrer avant de les utiliser. Si l'utilisateur le configure pour la première fois, nous appelons la méthode upup

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

Ici, nous obtenons le mot de passe défini par l'utilisateur pour la première fois et l'attribuons à l'élément pass.

Appelez ensuite la méthode récursive

///递归（循环调用自己）
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();
}
});
} 

Nous comparerons le mot de passe défini pour la deuxième fois avec celui de la première fois. S'ils sont identiques, nous passerons le mot de passe en arrière-plan via ajax et enregistrerons le mot de passe. Si les deux entrées sont différentes, nous nous appellerons à nouveau par récursion pour comparaison jusqu'à ce que cela réussisse. Bien sûr, vous pouvez également configurer trois réinitialisations différentes ou quelque chose du genre.

Comme la fonction est très simple, je ne l'expliquerai pas en détail. Si vous ne comprenez pas ou souhaitez vous référer au code source, veuillez laisser un message et j'écrirai un dôme à partager avec vous.