JS imitates the nine-square grid login function implementation code on the mobile phone_javascript skills

I have no projects to do recently, so I wrote a small demo in my free time. I would like to share it on the Script House platform for your reference. Please forgive me for the poor writing of this article!

Function and method logic are annotated in the code. So please just look at the code directly.

The effect is as follows:

Without further ado, let’s get straight to the code:

js part:

First, we draw two nine-square grid, one for logging in and setting the sliding password for the first time, and the other for setting the sliding password again. It is used to compare with the sliding password entered for the first time to determine whether the two passwords are valid. Consistent

The first nine-square grid

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

Use the same method to draw the second nine-square grid

///加载第二个
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 part:

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

When the user logs in, the database is queried through the business logic layer to see if the customer has set a Jiugongge password. If it is set, the add() method is called, and if it is not set, the upup() method is called.

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

When the user has set the time limit, we perform the following operations (call the add() method):

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

Here we can get the password that the customer slides in the nine-square grid, take it out (ie passwd), and compare it with the password in the hidden element pass. If they are the same, go to the next step, that is, the login is successful. Because I put all the passwords in the dome directly in the elements of the page, this is not recommended in actual development. It is best to compare them in the background. If you want to do this, please encrypt them before operating. If the user is setting it up for the first time, we call the upup method

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

Here we get the password set by the user for the first time and assign it to the pass element.

Then call the Recursive method

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

We will compare the password set for the second time with the first time. If they are the same, we will pass the password to the background through ajax and save the password. If the two inputs are different, we will call ourselves again through recursion for comparison until it passes. Of course, you can also set up three different resets or something.

Since the function is very simple, I won’t explain it in detail. If you don’t understand or want to refer to the source code, please leave a message and I will write a dome to share with you.