JS模仿手机上九宫格登录功能的实现代码

最近没有项目要做，就闲着没事写了个小演示。我想和我们的平台分享一下，供大家参考。请原谅我这篇文章写得不好！

和函数逻辑都在代码中进行了注释。所以请直接看代码。

效果如下：

话不多说，直接进入代码：

部分js:

首先我们画两个九方块，一个是第一次登录设置滑动密码，一个是再次设置滑动密码，用来和第一次输入的滑动密码进行对比，判断两个密码是否一致。

前九格。

$ ('#手势pwd ')。手势passwd({ background color : ' # 252736 '，//background color : ' # ffffffff '，//主控制色roundRadii: 25，//大圆点半径点radi : 6，//选择大圆点时显示的圆心半径为space: 30，//大圆点之间的间隙宽度为： 240，//整个组件的宽度为height: 240用同样的方法画出第二个九格。

///加载第二个函数getur () {$ ('#手势PSA ')。手势passwd({ background color 3360 ' # 252736 '，//background color : ' # ffffffff '，//主控色roundRadii: 25，//大点的半径为pointRadii: 6，//选择大点时显示的中心半径为space: 30，//大点之间的间隙宽度为： 240，//整个组件的宽度为3360 240，/} html部分：

Centerbrbrdiv id='手势pwd'/div div id='手势PSA ' style=' display : none '/div/center/div用户登录时，通过业务逻辑层查询数据库，看客户是否设置了九宫格密码。如果已设置，则调用add()方法；如果未设置，则调用upup()方法。

script $(function(){ var URL info=window . location . href；var UserName=URL info . split(' _ ')[1]；$.ajax({type: 'POST '，url: '././Home/Details '，dataType: 'json '，anyc: false，data : { UserName : UserName }，success:函数(数据){if (data.msg=='True') {$('#pass ')。文本(data . pass)；警报('请输入手势密码！')add()；}else {alert('请设置手势密码！')upup()；}}})}/script当用户设置好之后，我们执行以下操作(调用add()方法):

///设置了手势密码的用户有函数add () {$ ('#手势pwd ')。on('有passwd '，函数(e，passwd){ var result；if (passwd==$('#pass ')。text()){ result=true；} else { result=false} if(result==true){ $(' # gesturepwd ')。触发器(' passwdRight ')；SetTimeout(函数(){//密码验证正确后的其他操作，打开新页面等。//alert('密码正确！')$('#gesturepwd ')。hide()；$('#Indexs ')。show()；}, 500);//延迟半秒处理视觉效果} else {$ ('#手势pwd ')。触发器(' passwderror ')；//密码验证错误后的其他操作。}});}在这里，我们可以在九宫格中滑动获取客户的密码，取出来(即passwd)，与隐藏元素pass中的密码进行比对。如果密码相同，则进入下一步，即登录成功。因为都是dome的密码，所以我直接放在页面的元素里，实际开发中不建议这样。不如在后台对比一下。如果您想这样做，请在操作前加密它们。如果用户第一次设置它，我们调用upup方法。

///未设置手势密码的用户设置了$ ('#手势pwd ')。on('有passwd '，函数(e，passwd) {$ ('# pass ')。文本(密码)警报('请再次输入！').);getur()；$('#gesturepwd ')。hide()；$('#gesturepsa ')。show()；});///第二次设置递归()；}这里我们首次获取用户设置的密码，并将其分配给pass元素。

然后调用递归方法。

///递归(循环调用自己)函数Recursive () {$ ('#手势PSA ')。On ('has passwd '，function (e，passwd){ var URL info=window . location . href；var UserName=URL info . split(' _ ')[1]；if (passwd==$('#pass ')。text()) {$。ajax({type: 'POST '，url: '././Home/GrtturePassword '，dataType: 'json '，anyc: false，data : { gesturepassword : passwd，UserName: UserName }，success:函数(数据){alert(数据)；$('#gesturepsa ')。hide()；$('#Indexs ')。show()；}})}else {$('#gesturepsa ')。触发器(' passwderror ')；提醒('密码不一致两次，请重新输入！');$('#gesturepsa ')。移除()；$('#gesturepwd ')。在(' div id='gesturepsa'/div ')之后是getur()；递归()；}});}我们将第二次设置的密码与第一次设置的密码进行比较。如果是一样的，我们会通过ajax将密码发送到后台保存密码。如果两个输入不同，我们将通过递归调用自己一次进行比较，直到它通过。当然，您也可以设置三种不同的重置或其他。

因为功能很简单，我就不详细解释了。如果你不理解或者参考源代码，请留言，我会写一个穹顶分享给你。