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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
JS动画定时器知识总结
Mar 23 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 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语法(4)
2006/10/09 PHP
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
php生成rss类用法实例
2015/04/14 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
Javascript缓存API
2016/06/14 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
python实现神经网络感知器算法
2017/12/20 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
python可迭代对象去重实例
2020/05/15 Python
日本小田急百货官网:Odakyu
2018/07/19 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
zabbix配置nginx监控的实现
2022/05/25 Servers