JS模仿手机端九宫格登录功能实现代码
作者:熊灬孩灬子 发布时间:2024-04-17 10:33:21
标签:js,九宫格,登录
最近没有项目做,闲来无事写了一个小demo,特此分享到脚本之家平台,供大家参考下,本文写的不好还请各位大侠见谅!
功能及方法逻辑都注释在代码中。所以麻烦大家直接看代码。
效果如下:
话不多说直接上代码:
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与大家分享。
0
投稿
猜你喜欢
- XML是一个精简的SGML,它将SGML的丰富功能与HTML的易用性结合到Web的应用中。XML保留了SGML的可扩展功能,这使XML从根本
- 一、项目展示项目是一个简单实用的二维码生成器。使用者可以在生成器中输入文字生成二维码,也可以在识别器中识别二维码的内容二、项目核心代码二维码
- 一.基本数据类型整数:int字符串:str(注:\t等于一个tab键)布尔值: bool列表:list 列表用[]元祖:tuple元祖用()
- 本文为大家分享了Python3实现发送QQ邮件功能:html,供大家参考,具体内容如下之前已经成功发送了qq邮件。下面贴出html格式的qq
- 本文实例讲述了Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能。分享给大家供大家参考,具体如下:由于目前工作
- 有一些问题可能会遇到同元素多列去重问题,下面介绍一种非常简单效率也很快的做法,用pandas来实现。首先我们看一下数据类型:G1 G2a b
- 本篇文章适合css新手学习,对于已经掌握了css的朋友们也可以通过本片文章来复习知识。作者通过实践,认为在有些情况下css的代码是可以更加简
- 前言本文用Python实例阐述了一些关于进程、线程和协程的概念,由于水平有限,难免出现错漏,敬请批评改正。前提条件熟悉Python基本语法熟
- 在pycharm上依次选择打开File->settings->Editor->File andCode Templates
- 过滤非法的SQL字符的函数代码:'*************************************************
- 如下所示:a = [1,1,1,2,3,45,1,2,1]a.remove(1) result: [1,1,2,3,45,1,2,1]whi
- 前言PyCharm是一种Python 的IDE工具(集成开发环境),带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,内部
- 页面加载loading效果, 这个挺好玩的!用setTimeout实现的!可以和服务端整合弄一些生成HTML或者上传文件等应用!
- chr()函数与ord()函数解析chr()函数用一个范围在 range(256)内的(就是0~255)整数作参数,返回一个对应的字符。返回
- 需求:对方提供处理文件的接口,本地将待处理文件压缩后,通过http post multipart方式上传,等待处理完成后从相应连接下载结果代
- javascript 代码实现vbscript中的trim、left、right等函数兼容IE,FireFox。<style>b
- 本文实例为大家分享了JS实现拖动模糊框特效的具体代码,供大家参考,具体内容如下需求:在图片上拖动按钮,图片蒙层慢慢覆盖,当蒙层边缘碰到左右下
- PDOStatement::columnCountPDOStatement::columnCount — 返回结果集中的列数。(PHP 5
- 2003年以来,网页的平均尺寸已经增长3倍。从2003到2008,网页的平均尺寸从93.7K增至312K,增幅233%。同时,在这5年之内,
- 可视化辅助函数在下面的代码的注释内有大致的操作基本操作与前面的人脸检测的操作相似,增加了可视化的辅助函数import matplotlib.