《JS仿照手机端九宫格登录功能实现代码_》由会员分享，可在线阅读，更多相关《JS仿照手机端九宫格登录功能实现代码_（8页珍藏版）》请在金锄头文库上搜索。
1、JS仿照手机端九宫格登录功能实现代码_ 这篇文章主要介绍了JS仿照手机端九宫格登录功能实现代码的相关资料,需要的伴侣可以参考下 最近没有项目做，闲来无事写了一个小demo，特此分享到脚本之家平台，供大家参考下，本文写的不好还请各位大侠见谅！ 功能及方法规律都说明在代码中。所以麻烦大家挺直看代码。 效果如下： 话不多说挺直上代码： js部分： 首先我们先画出两个九宫格，一个用于登录和首次设置滑动密码用法，另个用于再次设置滑动密码，用于与第一次输入的滑动密码进行对比，推断两次密码是否全都 第一个九宫格 $(#gesturepwd).GesturePasswd( backgroundColor: #
2、252736, /背景色 color: #FFFFFF, /主要的控件颜色 roundRadii: 25, /大圆点的半径 pointRadii: 6, /大圆点被选中时显示的圆心的半径 space: 30, /大圆点之间的间隙 width: 240, /整个组件的宽度 height: 240, /整个组件的高度 lineColor: #00aec7, /用户划出线条的颜色 zindex: 100 /整个组件的css z-index属性 ); 在用同样的方式画出其次个九宫格 /加载其次个 function getur() $(#gesturepsa).GesturePasswd( backgr
3、oundColor: #252736, /背景色 color: #FFFFFF, /主要的控件颜色 roundRadii: 25, /大圆点的半径 pointRadii: 6, /大圆点被选中时显示的圆心的半径 space: 30, /大圆点之间的间隙 width: 240, /整个组件的宽度 height: 240, /整个组件的高度 lineColor: #00aec7, /用户划出线条的颜色 zindex: 100 /整个组件的css z-index属性 ); html部分： div centerbrbr div id=gesturepwd/div div id=gesturepsa s
4、tyle=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: func
5、tion (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 =
6、false; if (result = true) $(#gesturepwd).trigger(passwdRight); setTimeout(function () /密码验证正确后的其他操作，打开新的页面等。 /alert(密码正确！) $(#gesturepwd).hide(); $(#Indexs).show(); , 500); /延迟半秒以照看视觉效果 else $(#gesturepwd).trigger(passwdWrong); /密码验证错误后的其他操作。 ); 这里我们可以猎取客户在九宫格滑动的密码，将之取出来（即 passwd），我们将之与隐蔽元素pass中的密码对
7、比，假如一样这进入下一步，即登录胜利。由于是dome全部密码我挺直放在页面的元素中，在实际开发中不建议这样，最好在后台进行对比，假如要这样请加密之后操作。假如用户为第一次设置的话，我们调用upup方法 /没有设置过手势密码用户 function upup() /第一次设置 $(#gesturepwd).on(hasPasswd, function (e, passwd) $(#pass).text(passwd) alert(请再次输入!); getur(); $(#gesturepwd).hide(); $(#gesturepsa).show(); ); /其次次设置 Recursive()
8、; 这里我们猎取到用户第一次滑动设置的密码将之赋给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, a
9、nyc: 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与大家分享。 .
