JS模仿手机端九宫格登录功能实现代码(js手机模拟器)

编辑：rootadmin

推荐整理分享JS模仿手机端九宫格登录功能实现代码(js手机模拟器)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js模拟登录网站,js手机版,js模拟用户操作,js 模拟new,js手机模拟器,js模拟登录网站,js手机模拟器,js 模拟new,内容如对您有帮助，希望把文章链接给更多的朋友！

最近没有项目做，闲来无事写了一个小demo，特此分享到积木网平台，供大家参考下，本文写的不好还请各位大侠见谅！

　功能及方法逻辑都注释在代码中。所以麻烦大家直接看代码。

　效果如下：

　话不多说直接上代码：

　js部分：

　首先我们先画出两个九宫格，一个用于登录和首次设置滑动密码使用，另个用于再次设置滑动密码，用于与第一次输入的滑动密码进行对比，判断两次密码是否一致

　第一个九宫格

在用同样的方式画出第二个九宫格

html部分：

用户登录时通过业务逻辑层查询数据库，看客户是否设置九宫格密码，如果设置则调用add()方法，未设置则调用upup()方法。

当用户已经设置过时我们进行如下操作（调用add（）方法）：

这里我们可以获取客户在九宫格滑动的密码，将之取出来（即 passwd），我们将之与隐藏元素pass中的密码对比，如果一样这进入下一步，即登录成功。因为是dome所有密码我直接放在页面的元素中，在实际开发中不建议这样，最好在后台进行对比，如果要这样请加密之后操作。如果用户为第一次设置的话，我们调用upup方法

这里我们获取到用户第一次滑动设置的密码将之赋给pass元素中。

然后调用Recursive方法

　　我们将第二次设置的密码与第一次对比，如果一样我们就通过ajax将密码传到后台，进行密码保存操作。如果两次输入不一样我们就通过递归在将自己在调用一次进行对比，直至通过，当然你也可以设置3次不同重新设置什么的。

　　由于功能很简单就不进行详解，如果有不明白或者要参考源码的请留言，我会编写一个dome与大家分享。

JavaScript Math 对象常用方法总结 Math.abs(x):可返回数的绝对值Math.ceil(x):向上取整Math.floor(x):向下取整Math.max(x,y):最大值Math.min(x,y):最小值Math.random(x):随机数Math.round(x):四舍五入获取指定范

JavaScript String 对象常用方法总结字符串是不可变的。字符串方法，不会改变原有字符串的内容，而是返回一个新字符串。charAt()：返回在指定位置的字符。concat()：连接两个字符串文本

onclick和onblur冲突问题的快速解决方法新浪首页的搜索框里面有一个使用ajax的下拉框。我们需要实现一个点击下拉框里面的一项，让搜索框里面的值变成这一项，同时下拉框消失的效果，但

标签: js手机模拟器

本文链接地址:https://www.jiuchutong.com/biancheng/369900.html 转载请保留说明！

上一篇：Bootstrap Chart组件使用教程(bootstrap 图表插件)

下一篇：onclick和onblur冲突问题的快速解决方法(onclick和onclientclick)