直接上代码：

目录结构：

本次开用到的技术jq，以及引入的jq插件jquery.gesture.password.min.js
index.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="./css/index.css">

    <title>jq设置h5的手势密码</title>

</head>

<body>

    <div class="gesture_wrapper">

        <div class="thumbnail">

            <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

            <span class=" limit">至少连接四个点</span>

            <span class=" again againcn">再次绘制解锁图案</span>

            <span class=" disagree disagreecn">两次不一致,请重新绘制</span>

        </div>

        <div class="gesturepwd_modal">

            <div id="gesturepwd"></div>

        </div>

        <div>

            <span class="clear_again ">重新绘制</span>

        </div>

    </div>

</body>

<script src="./script/jquery-3.2.1.min.js"></script>

<script src="./script/jquery.gesture.password.min.js"></script>

<script src="./js/index.js"></script>

</html>
index.js
$(function () {

    /*

     *count记录输入手势密码次数

     * pwd1第一次输入的手势密码

     */

    let count = 0,

        pwd1 = null,

        lis = $('li')

    $('.again,.disagree,.limit').hide()

    $("#gesturepwd").GesturePasswd({

        backgroundColor: "white", //背景色

        color: "#E4E4E4", //主要的控件颜色

        roundRadii: 25, //大圆点的半径

        pointRadii: 6, //大圆点被选中时显示的圆心的半径

        space: 30, //大圆点之间的间隙

        width: 240, //整个组件的宽度

        height: 240, //整个组件的高度

        lineColor: "red", //用户划出线条的颜色

        zindex: 100 //整个组件的css z-index属性

    });

    $("#gesturepwd").on("hasPasswd", function (e, passwd) {

        var result;

        count++

        console.log(count)

        if (count == 1) {

            if (passwd.length < 4) {

                $("#gesturepwd").trigger("passwdWrong");

                $('.limit').show()

                count = 0

                return

            }

            $('.limit').hide()

            pwd1 = passwd

            lis.each(function (i, ele) {

                if (passwd.indexOf(i + 1) != -1) {

                    $(this).css({

                        backgroundColor: 'red'

                    })

                }

            })

            $("#gesturepwd").trigger("passwdWrong");

        }

        $('.againcn').show()

        if (count >= 2) {

            $('.again').hide()

            if (passwd == pwd1) {

                result = true;

            } else {

                result = false;

            }

            if (result == true) {

                $("#gesturepwd").trigger("passwdRight");

                setTimeout(function () {

                    //密码验证正确后的其他操作，打开新的页面等。。。

                    alert('密码正确')

                }, 500); //延迟半秒以照顾视觉效果

            } else {

                $("#gesturepwd").trigger("passwdWrong");

                //密码验证错误后的其他操作。。。

                $('.disagreecn').show()

            }

        }

    });

    //重新绘制

    $('.clear_again').click(function () {

        count = 0

        pwd1 = null

        $('.again,.disagree').hide()

        lis.each(function (i, ele) {

            $(this).css({

                backgroundColor: 'white'

            })

        })

    })

})
index.css
*{

    list-style: none;

    margin: 0;

    padding: 0;

}

.gesture_wrapper {

    margin-top: 5px;

}

.gesturepwd_modal {

    display: flex;

    justify-content: center;

    margin-top: 60px;

}

.thumbnail {

    margin-top: 60px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: center;

}

.again,

.disagree,

.limit {

    margin-top: 20px;

}

ul {

    display: flex;

    width: 100px;

    flex-wrap: wrap;

}

li {

    width: 20px;

    margin-left: 10px;

    margin-top: 10px;

    border-radius: 50%;

    height: 20px;

    border: 1px solid #E4E4E4;

}

.clear_again {

    margin-top: 80px;

    color: #009943;

    display: flex;

    justify-content: center;

}
效果图



资源文件可到本人github地址：https://github.com/raind33/HTML5/tree/master/h5%E6%89%8B%E5%8A%BF%E5%AF%86%E7%A0%81

h5手势密码开发(使用jq)的更多相关文章

  1. H5移动端手势密码组件

    项目简介 最近参加了2017年360前端星计划,完成了一个有趣的UI组件开发大作业,借机和大家分享一下移动端开发的技术啦~~ 本项目采用原生JS和Canvas实现移动端手势密码组件,支持手势密码设置和 ...

  2. iOS 教你如何实现手势密码

    本次讲的手势密码,是在九个按键上实现的,这里讲的是手势密码的基本实现和效果 同样先上效果图 其实就是对画图功能的一个实现,再加上手势操作结合起来 屏幕宽度高度,方便下面操作,不做解释 #define ...

  3. 28.【转载】挖洞技巧：APP手势密码绕过思路总结

    说到APP手势密码绕过的问题,大家可能有些从来没接触过,或者接触过,但是思路也就停留在那几个点上,这里我总结了我这1年来白帽子生涯当中所挖掘的关于这方面的思路,有些是网上已经有的,有些是我自己不断摸索 ...

  4. 钉钉企业内部H5微应用开发

    企业内部H5微应用开发 分为 服务端API和前端API的开发,主要涉及到进入应用免登流程和JSAPI鉴权. JSAPI鉴权开发步骤: 1.创建H5微应用 登入钉钉开放平台(https://open-d ...

  5. APP手势密码绕过

    之前写的文章收到了很多的好评,主要就是帮助到了大家学习到了新的思路.自从发布了第一篇文章,我就开始筹备第二篇文章了,最终打算在07v8首发,这篇文章我可以保障大家能够学习到很多思路.之前想准备例子视频 ...

  6. Egret白鹭H5小游戏开发入门（二）

    前言: 昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等. 整体概况: 根据上一篇 ...

  7. Egret白鹭H5小游戏开发入门（三）

    前言: 在上一篇文章中着重介绍了H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明等等,那么今天主要是涉及到场景的创建,loading的修改等等的代码编写. 对于这一节,我在讲解的过 ...

  8. jQuery之手势密码

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. IOS 学习笔记 2015-04-15 手势密码(原)

    // // WPSignPasswordView.h // 网投网 // // Created by wangtouwang on 15/4/9. // Copyright (c) 2015年 wan ...

随机推荐

  1. 用好SVN与Git，版本管理都不是问题

    介绍一下SVN SVN:代码控制器(版本控制器),主要是为了多人协同开发项目,管理代码.也可以管理个人代码.也叫程序界的”后悔药“. SVN(是subversion的简称)是近年来一款基于C/S架构的 ...

  2. PSP（3.16——3.22）以及周记录

    3.17 13:30 14:45 15 60 讨论班 A Y min 14:50 17:05 5 130 得到设备 Cordova 蓝牙连接 A Y min 23:15 23:45 5 25 英语百词 ...

  3. EntityFramework 数据校验异常处理

    public void Insert(PageHost entity) { try { db.pagehost.Add(entity); db.SaveChanges(); } catch (DbEn ...

  4. Degree Set CodeForces - 976D（双指针）

    题意: 构造一个无向图,使得无向图里的所有点的度数 所组成的集合 即为给出的几个数 解析: 题中的数是以上升的顺序给出的, 我们对于dn+1个数进行处理,对于当前数i,有两个操作 1.向后边的所有点连 ...

  5. hdwiki5.1 词条参考资料都是相同的问题解决

    HDWiki 5.1版本存在的BUG,当一个词条添加参考资料后,所有词条均显示以此相同的参考资料:而且参考资料不能修改和删除! 解决方法如下: 找到后台文件:\model\reference.clas ...

  6. C/C++ Bug记录

    链接错误解决方法 1. 检查库是否链接正确 2. 库的顺序是否合理(如果库之间有依赖关系的话) 3. 检查obj文件是否存在既有C编译的,也有C++编译的,如果存在,用extern "C&q ...

  7. 【BZOJ1449】[JSOI2009]球队收益（网络流，费用流）

    [BZOJ1449][JSOI2009]球队收益(网络流,费用流) 题面 BZOJ 洛谷 题解 首先对于一支队伍而言,总共进行多少场比赛显然是已知的,假设是\(n_i\)场,那么它的贡献是:\(C_i ...

  8. 在c语言中嵌入汇编语句，对于我来说相当难。

    今天早上在csdn论坛上看到一个帖子http://topic.csdn.net/u/20120917/14/82f42e17-977a-4824-95bd-7b79db15d283.html:“C语言 ...

  9. 基于CMS的组件复用实践

    目前前端项目大多基于Vue.React.Angular等框架来实现,这一类框架都有一个明显的特点:基于模块化以及组件化思维.所以,开发者在使用上述框架时,实际上是在写一个一个的组件,并且组件与组件之间 ...

  10. python的面向对象-面向对象设计

    1.面向对象设计 def school(name,addr,type):#定义一个大函数的作用就是不能让狗调用学校的方法 #学校动作 def kaoshi(school): print("[ ...