JS imitiert den Implementierungscode der Jiugongge-Anmeldefunktion für Mobiltelefone_Javascript-Fähigkeiten

Da ich in letzter Zeit keine Projekte zu erledigen habe, habe ich in meiner Freizeit eine kleine Demo geschrieben, die ich als Referenz auf der Script House-Plattform veröffentlichen möchte.

Funktions- und Methodenlogik werden im Code mit Anmerkungen versehen. Schauen Sie sich also bitte einfach den Code direkt an.

Der Effekt ist wie folgt:

Kommen wir ohne weitere Umschweife direkt zum Code:

js-Teil:

Zuerst zeichnen wir zwei Raster mit neun Quadraten, eines zum ersten Anmelden und Festlegen des Schiebepassworts und das andere zum erneuten Festlegen des Schiebepassworts. Es wird zum Vergleich mit dem zum ersten Mal eingegebenen Schiebepasswort verwendet Zeit, um festzustellen, ob die beiden Passwörter konsistent sind

Das erste Neun-Quadrat-Raster

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

Verwenden Sie die gleiche Methode, um das zweite Neunquadrat-Raster zu zeichnen

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

HTML-Teil:

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

Wenn sich der Benutzer anmeldet, wird die Datenbank über die Geschäftslogikschicht abgefragt, um zu sehen, ob der Kunde ein Jiugongge-Passwort festgelegt hat. Wenn es festgelegt ist, wird die Methode add() aufgerufen, und wenn es nicht festgelegt ist, wird das Die Methode upup() wird aufgerufen.

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

Wenn der Benutzer das Zeitlimit festgelegt hat, führen wir die folgenden Vorgänge aus (rufen Sie die Methode add() auf):

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

Hier können wir das Passwort abrufen, das der Kunde in das Neun-Quadrat-Raster einfügt, es herausnehmen (dh passwd) und es mit dem Passwort im versteckten Element pass vergleichen. Wenn sie gleich sind, fahren Sie mit dem nächsten fort Schritt, das heißt, die Anmeldung ist erfolgreich. Da ich alle Passwörter direkt in die Elemente der Seite einfüge, wird dies in der tatsächlichen Entwicklung nicht empfohlen. Wenn Sie dies tun möchten, verschlüsseln Sie sie bitte vor dem Betrieb. Wenn der Benutzer es zum ersten Mal einrichtet, rufen wir die Upup-Methode

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

Hier erhalten wir das vom Benutzer erstmals festgelegte Passwort und weisen es dem Pass-Element zu.

Dann rufen Sie die rekursive Methode auf

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

Wir vergleichen das beim zweiten Mal festgelegte Passwort mit dem beim ersten Mal. Wenn sie gleich sind, übergeben wir das Passwort über Ajax an den Hintergrund und speichern es. Wenn die beiden Eingaben unterschiedlich sind, rufen wir uns zum Vergleich erneut auf, bis sie erfolgreich sind. Natürlich können Sie auch drei verschiedene Resets oder ähnliches einrichten.

Da die Funktion sehr einfach ist, werde ich sie nicht im Detail erklären, wenn Sie den Quellcode nicht verstehen oder darauf verweisen möchten, hinterlassen Sie bitte eine Nachricht und ich werde eine Kuppel schreiben, die ich mit Ihnen teilen kann.