时间:2021-07-01 10:21:17 帮助过:13人阅读
功能及方法逻辑都注释在代码中。所以麻烦大家直接看代码。
效果如下:
话不多说直接上代码:
js部分:
首先我们先画出两个九宫格,一个用于登录和首次设置滑动密码使用,另个用于再次设置滑动密码,用于与第一次输入的滑动密码进行对比,判断两次密码是否一致
第一个九宫格
在用同样的方式画出第二个九宫格
html部分:
用户登录时通过业务逻辑层查询数据库,看客户是否设置九宫格密码,如果设置则调用add()方法,未设置则调用upup()方法。
当用户已经设置过时我们进行如下操作(调用add()方法):
这里我们可以获取客户在九宫格滑动的密码,将之取出来(即 passwd),我们将之与隐藏元素pass中的密码对比,如果一样这进入下一步,即登录成功。因为是dome所有密码我直接放在页面的元素中,在实际开发中不建议这样,最好在后台进行对比,如果要这样请加密之后操作。如果用户为第一次设置的话,我们调用upup方法
这里我们获取到用户第一次滑动设置的密码将之赋给pass元素中。
然后调用Recursive方法
我们将第二次设置的密码与第一次对比,如果一样我们就通过ajax将密码传到后台,进行密码保存操作。如果两次输入不一样我们就通过递归在将自己在调用一次进行对比,直至通过,当然你也可以设置3次不同重新设置什么的。
由于功能很简单就不进行详解,如果有不明白或者要参考源码的请留言,我会编写一个dome与大家分享。