JS模仿手机端九宫格登录功能实现代码

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

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

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

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

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

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

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