JS는 휴대폰_javascript 기술에서 9각형 그리드 로그인 기능 구현 코드를 모방합니다.

최근에는 할 프로젝트가 없어서 여유 시간에 작은 데모를 작성했습니다. 참고로 이 글을 Script House 플랫폼에 공유하고 싶습니다.

코드에는 함수와 메소드 로직이 주석으로 표시되어 있습니다. 그러니 코드를 직접 살펴보시기 바랍니다.

효과는 다음과 같습니다.

더 이상 고민하지 않고 바로 코드를 살펴보겠습니다.

js 부분:

먼저 2개의 9각형 그리드를 그립니다. 하나는 로그인하고 슬라이딩 비밀번호를 처음 설정하기 위한 것이고, 다른 하나는 처음에 입력한 슬라이딩 비밀번호와 비교하는 데 사용됩니다. 두 비밀번호가 유효한지 확인하는 시간

첫 번째 9개의 정사각형 그리드

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

같은 방법으로 두 번째 9개의 정사각형 격자를 그립니다

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

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

사용자가 로그인하면 비즈니스 로직 레이어를 통해 데이터베이스에 쿼리하여 고객이 Jiugongge 비밀번호를 설정했는지 확인합니다. 설정되어 있으면 add() 메소드가 호출되고, 설정되어 있지 않으면 upup() 메소드가 호출됩니다.

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

사용자가 시간 제한을 설정하면 다음 작업을 수행합니다(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");
//密码验证错误后的其他操作。。。
}
});
} 

여기서 고객이 9각형 그리드에 밀어넣은 비밀번호를 가져와서(예: passwd) 숨겨진 요소 패스의 비밀번호와 비교할 수 있습니다. 동일하면 다음으로 이동합니다. 단계, 즉 로그인이 성공한 것입니다. 돔에 있는 모든 비밀번호를 페이지 구성요소에 직접 넣어두었기 때문에 실제 개발에서는 권장하지 않습니다. 사용자가 처음으로 설정하는 경우 upup 메소드를 호출합니다

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

여기서 사용자가 처음으로 설정한 비밀번호를 가져와서 패스 요소에 할당합니다.

그런 다음 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();
}
});
} 

두 번째로 설정한 비밀번호를 처음과 비교해보겠습니다. 동일하면 ajax를 통해 비밀번호를 백그라운드로 전달하고 비밀번호를 저장합니다. 두 입력이 다르면 통과할 때까지 비교를 위해 재귀를 통해 다시 호출합니다. 물론 세 가지 다른 재설정 등을 설정할 수도 있습니다.

기능이 매우 간단하기 때문에 자세히 설명하지 않겠습니다. 이해가 안되거나 소스코드를 참고하고 싶으신 분들은 메시지를 남겨주시면 돔을 작성하여 공유해드리겠습니다.