JS模仿手機端九宮格登入功能實現代碼，js九宮

JS模仿手機端九宮格登入功能實現代碼，js九宮

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

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

　效果如下：

　話不多說直接上代碼：

　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屬性});} 

html部分：

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

使用者登入時通過商務邏輯層查詢資料庫，看客戶是否設定九宮格密碼，如果設定則調用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");//密碼驗證錯誤後的其他動作。。。}});} 

這裡我們可以擷取客戶在九宮格滑動的密碼，將之取出來（即 passwd），我們將之與隱藏元素pass中的密碼對比，如果一樣這進入下一步，即登入成功。因為是dome所有密碼我直接放在頁面的元素中，在實際開發中不建議這樣，最好在後台進行對比，如果要這樣請加密之後操作。如果使用者為第一次設定的話，我們調用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();}});} 

　　我們將第二次設定的密碼與第一次對比，如果一樣我們就通過ajax將密碼傳到後台，進行密碼儲存操作。如果兩次輸入不一樣我們就通過遞迴在將自己在調用一次進行對比，直至通過，當然你也可以設定3次不同重新設定什麼的。

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