最近沒有專案做，閒來無事寫了一個小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與大家分享。
