js仿手機端九宮格登入功能

最近閒來無事把以前無聊時開發的小東西拿出來和大家分享下，寫的不好的請指出，我會及時修改。謝謝。

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

效果如下：

話不多說直接上**：

js部分：

首先我們先畫出兩個九宮格，乙個用於登入和首次設定滑動密碼使用，另個用於再次設定滑動密碼，用於與第一次輸入的滑動密碼進行對比，判斷兩次密碼是否一致

第乙個九宮格

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

在用同樣的方式畫出第二個九宮格

//
/載入第二個
function
getur() );
}

html部分：

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

使用者登入時通過業務邏輯層查詢資料庫，看客戶是否設定九宮格密碼，如果設定則呼叫add()方法，未設定則呼叫upup()方法。

當使用者已經設定過時我們進行如下操作（呼叫add（）方法）：

//
/設定過手勢密碼的使用者
function
add() 
else
if (result == true
) , 500);  //
延遲半秒以照顧視覺效果
}                
else
});}

這裡我們可以獲取客戶在九宮格滑動的密碼，將之取出來（即 passwd），我們將之與隱藏元素pass中的密碼對比，如果一樣這進入下一步，即登入成功。因為是dome所有密碼我直接放在頁面的元素中，在實際開發中不建議這樣，最好在後台進行對比，如果要這樣**密之後操作。

如果使用者為第一次設定的話，我們呼叫upup方法

//
/沒有設定過手勢密碼使用者
function
upup() );
///第二次設定
recursive();
}

這裡我們獲取到使用者第一次滑動設定的密碼將之賦給pass元素中。

然後呼叫recursive方法

//
/遞迴（迴圈呼叫自己）
function
recursive() ,
success: 
function
(data) })}
else
});}

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

文筆不好，語言表達可能不怎麼樣，請諒解！

src="" allowfullscreen="" frameborder="0" height="498" width="510">