JS模仿手機(jī)端九宮格登錄功能實(shí)現(xiàn)代碼
最近沒有項(xiàng)目做，閑來無事寫了一個(gè)小demo，特此分享到腳本之家平臺(tái)，供大家參考下，本文寫的不好還請(qǐng)各位大俠見諒！
功能及方法邏輯都注釋在代碼中。所以麻煩大家直接看代碼。
效果如下：
話不多說直接上代碼：
js部分：
首先我們先畫出兩個(gè)九宮格，一個(gè)用于登錄和首次設(shè)置滑動(dòng)密碼使用，另個(gè)用于再次設(shè)置滑動(dòng)密碼，用于與第一次輸入的滑動(dòng)密碼進(jìn)行對(duì)比，判斷兩次密碼是否一致
第一個(gè)九宮格
$("#gesturepwd").GesturePasswd({
backgroundColor: "#252736", //背景色
color: "#FFFFFF", //主要的控件顏色
roundRadii: 25, //大圓點(diǎn)的半徑
pointRadii: 6, //大圓點(diǎn)被選中時(shí)顯示的圓心的半徑
space: 30, //大圓點(diǎn)之間的間隙
width: 240, //整個(gè)組件的寬度
height: 240, //整個(gè)組件的高度
lineColor: "#00aec7", //用戶劃出線條的顏色
zindex: 100 //整個(gè)組件的css z-index屬性
});
在用同樣的方式畫出第二個(gè)九宮格
///加載第二個(gè)
function getur() {
$("#gesturepsa").GesturePasswd({
backgroundColor: "#252736", //背景色
color: "#FFFFFF", //主要的控件顏色
roundRadii: 25, //大圓點(diǎn)的半徑
pointRadii: 6, //大圓點(diǎn)被選中時(shí)顯示的圓心的半徑
space: 30, //大圓點(diǎn)之間的間隙
width: 240, //整個(gè)組件的寬度
height: 240, //整個(gè)組件的高度
lineColor: "#00aec7", //用戶劃出線條的顏色
zindex: 100 //整個(gè)組件的css z-index屬性
});
}
html部分：
<div> <center><br><br> <div id="gesturepwd"></div> <div id="gesturepsa" style="display:none"></div> </center> </div>
用戶登錄時(shí)通過業(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("請(qǐng)輸入手勢(shì)密碼!")
add();
}
else {
alert("請(qǐng)?jiān)O(shè)置手勢(shì)密碼!")
upup();
}
}
})
})
</script>
當(dāng)用戶已經(jīng)設(shè)置過時(shí)我們進(jìn)行如下操作（調(diào)用add（）方法）：
///設(shè)置過手勢(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 () {
//密碼驗(yàn)證正確后的其他操作，打開新的頁面等。。。
//alert("密碼正確！")
$("#gesturepwd").hide();
$("#Indexs").show();;
}, 500); //延遲半秒以照顧視覺效果
}
else {
$("#gesturepwd").trigger("passwdWrong");
//密碼驗(yàn)證錯(cuò)誤后的其他操作。。。
}
});
}
這里我們可以獲取客戶在九宮格滑動(dòng)的密碼，將之取出來（即 passwd），我們將之與隱藏元素pass中的密碼對(duì)比，如果一樣這進(jìn)入下一步，即登錄成功。因?yàn)槭莇ome所有密碼我直接放在頁面的元素中，在實(shí)際開發(fā)中不建議這樣，最好在后臺(tái)進(jìn)行對(duì)比，如果要這樣請(qǐng)加密之后操作。如果用戶為第一次設(shè)置的話，我們調(diào)用upup方法
///沒有設(shè)置過手勢(shì)密碼用戶
function upup() {
///第一次設(shè)置
$("#gesturepwd").on("hasPasswd", function (e, passwd) {
$("#pass").text(passwd)
alert("請(qǐng)?jiān)俅屋斎?");
getur();
$("#gesturepwd").hide();
$("#gesturepsa").show();
});
///第二次設(shè)置
Recursive();
}
這里我們獲取到用戶第一次滑動(dòng)設(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("兩次密碼不一致，請(qǐng)重新輸入!");
$("#gesturepsa").remove();
$("#gesturepwd").after("<div id='gesturepsa'></div>")
getur();
Recursive();
}
});
}
我們將第二次設(shè)置的密碼與第一次對(duì)比，如果一樣我們就通過ajax將密碼傳到后臺(tái)，進(jìn)行密碼保存操作。如果兩次輸入不一樣我們就通過遞歸在將自己在調(diào)用一次進(jìn)行對(duì)比，直至通過，當(dāng)然你也可以設(shè)置3次不同重新設(shè)置什么的。
由于功能很簡(jiǎn)單就不進(jìn)行詳解，如果有不明白或者要參考源碼的請(qǐng)留言，我會(huì)編寫一個(gè)dome與大家分享。
相關(guān)文章
學(xué)習(xí)js就不得不學(xué)他的數(shù)組，這篇文章是由色拉油整理下，需要學(xué)習(xí)js數(shù)組的朋友可以參考下2013-10-10
npm install報(bào)錯(cuò)無法創(chuàng)建packge.json文件的解決辦法
當(dāng)你在運(yùn)行 npm install 時(shí)遇到錯(cuò)誤,提示無法找到 package.json 文件,也沒有創(chuàng)建一個(gè) package.json 文件,只創(chuàng)建了一個(gè)package-lock.json文件,本文給大家介紹詳細(xì)的解決辦法,需要的朋友可以參考下2024-02-02
認(rèn)識(shí)Knockout及如何使用Knockout綁定上下文
Knockout簡(jiǎn)稱ko，是一個(gè)輕量級(jí)的javascript類庫，采用MVVM設(shè)計(jì)模式（即Model、view、viewModel），簡(jiǎn)單優(yōu)雅的實(shí)現(xiàn)了雙向綁定，實(shí)時(shí)更新，幫助您使用干凈的數(shù)據(jù)模型來創(chuàng)建豐富的、響應(yīng)式的用戶界面2015-12-12
JS實(shí)現(xiàn)的顏色實(shí)時(shí)漸變效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的顏色實(shí)時(shí)漸變效果,結(jié)合實(shí)例形式分析了JavaScript結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)動(dòng)態(tài)改變頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-03-03
圖片翻轉(zhuǎn)效果具體實(shí)現(xiàn)代碼
原生js封裝二級(jí)城市下拉列表的實(shí)現(xiàn)代碼
Enter轉(zhuǎn)換為Tab的小例子(兼容IE,Firefox)
