這篇文章主要介紹了JS模仿手機端九宮格登錄功能實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下

最近沒有項目做，閑來無事寫了一個小demo，特此分享到腳本之家平臺，供大家參考下，本文寫的不好還請各位大俠見諒！

功能及方法邏輯都注釋在代碼中。所以麻煩大家直接看代碼。

效果如下：

話不多說直接上代碼：

js部分：

首先我們先畫出兩個九宮格，一個用于登錄和首次設(shè)置滑動密碼使用，另個用于再次設(shè)置滑動密碼，用于與第一次輸入的滑動密碼進行對比，判斷兩次密碼是否一致

第一個九宮格

$("#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屬性

});

}

html部分：

<div>

<center><br><br>

<div id="gesturepwd"></div> 

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

</center>

</div>

用戶登錄時通過業(yè)務(wù)邏輯層查詢數(shù)據(jù)庫，看客戶是否設(shè)置九宮格密碼，如果設(shè)置則調(diào)用add()方法，未設(shè)置則調(diào)用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("請設(shè)置手勢密碼!")

upup();

}

}

})

})

</script>

當用戶已經(jīng)設(shè)置過時我們進行如下操作（調(diào)用add（）方法）：

///設(shè)置過手勢密碼的用戶

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");

//密碼驗證錯誤后的其他操作。。。

}

});

}

這里我們可以獲取客戶在九宮格滑動的密碼，將之取出來（即 passwd），我們將之與隱藏元素pass中的密碼對比，如果一樣這進入下一步，即登錄成功。因為是dome所有密碼我直接放在頁面的元素中，在實際開發(fā)中不建議這樣，最好在后臺進行對比，如果要這樣請加密之后操作。如果用戶為第一次設(shè)置的話，我們調(diào)用upup方法

///沒有設(shè)置過手勢密碼用戶

function upup() {

///第一次設(shè)置

$("#gesturepwd").on("hasPasswd", function (e, passwd) {

$("#pass").text(passwd)

alert("請再次輸入!");

getur();

$("#gesturepwd").hide();

$("#gesturepsa").show();

});

///第二次設(shè)置

Recursive();

}

這里我們獲取到用戶第一次滑動設(shè)置的密碼將之賦給pass元素中。

然后調(diào)用Recursive方法

///遞歸（循環(huán)調(diào)用自己）

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();

}

});

}

我們將第二次設(shè)置的密碼與第一次對比，如果一樣我們就通過ajax將密碼傳到后臺，進行密碼保存操作。如果兩次輸入不一樣我們就通過遞歸在將自己在調(diào)用一次進行對比，直至通過，當然你也可以設(shè)置3次不同重新設(shè)置什么的。

由于功能很簡單就不進行詳解，如果有不明白或者要參考源碼的請留言，我會編寫一個dome與大家分享。