携帯電話上の9マスグリッドログイン機能実装コードをJSで模倣_javascriptスキル

最近やるべきプロジェクトがないので、暇なときに小さなデモを書きました。参考として Script House プラットフォームで共有したいと思います。この記事の書き方が下手なのはご容赦ください。

関数とメソッドのロジックはコード内に注釈が付けられます。したがって、コードを直接見てください。

効果は次のとおりです:

早速、コードに進みましょう:

js 部分:

まず、9 正方形のグリッドを 2 つ描画します。1 つは初めてログインしてスライド パスワードを設定するため、もう 1 つは最初に入力したスライド パスワードと比較するために使用されます。 2 つのパスワードが有効であるかどうかを判断する時間がかかります

最初の 9 マスのグリッド

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

同じ方法で 2 番目の 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() メソッドが呼び出され、設定されていない場合は 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();
}

ここでは、初めてユーザーが設定したパスワードを取得し、それを pass 要素に割り当てます。

次に、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();
}
});
} 

2回目に設定したパスワードと1回目に設定したパスワードを比較し、同じであればajax経由でバックグラウンドにパスワードを渡し、パスワードを保存します。 2 つの入力が異なる場合は、一致するまで再帰によって再度呼び出して比較します。もちろん、3 つの異なるリセットなどを設定することもできます。

非常に簡単な機能なので詳しくは説明しませんが、分からない場合やソースコードを参照したい場合は、メッセージを残していただければドームを作成して共有します。