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


Posted in Javascript onApril 28, 2016

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

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

 效果如下:

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

 话不多说直接上代码:

 js部分:

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

 第一个九宫格

$("#gesturepwd").GesturePasswd({
backgroundColor: "#252736", //背景色
color: "#FFFFFF", //主要的控件颜色
roundRadii: 25, //大圆点的半径
pointRadii: 6, //大圆点被选中时显示的圆心的半径
space: 30, //大圆点之间的间隙
width: 240, //整个组件的宽度
height: 240, //整个组件的高度
lineColor: "#00aec7", //用户划出线条的颜色
zindex: 100 //整个组件的css z-index属性
});

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

///加载第二个
function getur() {
$("#gesturepsa").GesturePasswd({
backgroundColor: "#252736", //背景色
color: "#FFFFFF", //主要的控件颜色
roundRadii: 25, //大圆点的半径
pointRadii: 6, //大圆点被选中时显示的圆心的半径
space: 30, //大圆点之间的间隙
width: 240, //整个组件的宽度
height: 240, //整个组件的高度
lineColor: "#00aec7", //用户划出线条的颜色
zindex: 100 //整个组件的css z-index属性
});
}

html部分:

<div>
<center><br><br>
<div id="gesturepwd"></div> 
<div id="gesturepsa" style="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: function (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 = false;
}
if (result == true) {
$("#gesturepwd").trigger("passwdRight");
setTimeout(function () {
//密码验证正确后的其他操作,打开新的页面等。。。
//alert("密码正确!")
$("#gesturepwd").hide();
$("#Indexs").show();;
}, 500); //延迟半秒以照顾视觉效果
}
else {
$("#gesturepwd").trigger("passwdWrong");
//密码验证错误后的其他操作。。。
}
});
}

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

///没有设置过手势密码用户
function upup() {
///第一次设置
$("#gesturepwd").on("hasPasswd", function (e, passwd) {
$("#pass").text(passwd)
alert("请再次输入!");
getur();
$("#gesturepwd").hide();
$("#gesturepsa").show();
});
///第二次设置
Recursive();
}

这里我们获取到用户第一次滑动设置的密码将之赋给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',
anyc: 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与大家分享。

Javascript 相关文章推荐
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
vue获取dom元素注意事项
Dec 28 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 #Javascript
Bootstrap Chart组件使用教程
Apr 28 #Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 #Javascript
location.hash保存页面状态的技巧
Apr 28 #Javascript
字符串反转_JavaScript
Apr 28 #Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 #Javascript
基于BootStarp的Dailog
Apr 28 #Javascript
You might like
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
php头像上传预览实例代码
2017/05/02 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
Python创建xml文件示例
2017/03/22 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
WxPython实现无边框界面
2019/11/18 Python
基于python 取余问题(%)详解
2020/06/03 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
解决python运行效率不高的问题
2020/07/20 Python
《会变的花树叶》教学反思
2014/02/10 职场文书
怎样写家长意见
2015/06/04 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
警用民用对讲机找不同
2022/02/18 无线电
教你nginx跳转配置的四种方式
2022/07/07 Servers