直接上代码：

目录结构：

本次开用到的技术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. selectTree & bug

    selectTree & bug 相对路径 & 绝对路径 http://192.168.58.189:8080/hui/#/components/selectTree https:// ...

  2. Git push -u orign master 提示hint: not have locally. This is usually caused by another repository push

    一.情景 1.在GitHub上创建一个仓库A,并且初始化了readme.md这个文档. 2.在本地用Git Bash初始化仓库A(一开始没有从GitHub上拉下来). git init /* 初始化一 ...

  3. 一本通1622Goldbach’s Conjecture

    1622:Goldbach’s Conjecture 时间限制: 1000 ms         内存限制: 524288 KB [题目描述] 原题来自:Ulm Local,题面详见:POJ 2262 ...

  4. Codeforces 1097 G. Vladislav and a Great Legend

    题目链接 一道好题. 题意:给定一棵\(n\)个点的树,求: \[\sum_{S\subseteq \{1,2,\dots,n\}}f(S)^k\] 其中\(f(S)\)代表用树边将点集\(S\)连通 ...

  5. String类的一些细节

    先看一段代码: public static void main(String[] args) {        String a = "a"+"b"+1;   ...

  6. dp乱写2:论dp在不在dp中（但在dp范畴）内的应用

    最近正儿八经的学习了dp,有一些题目非常明显看出来就是dp了比如说:过河卒.方格取数.导弹拦截.加分二叉树.炮兵阵地更加明显的还有:采药.装箱问题.过河.金明的预算方案.今天来谈谈dp的dp在不在dp ...

  7. 整除分块学习笔记+[CQOI2007]余数求和（洛谷P2261，BZOJ1257）

    上模板题例题: [CQOI2007]余数求和 洛谷 BZOJ 题目大意:求 $\sum^n_{i=1}k\ mod\ i$ 的值. 等等……这题就学了三天C++的都会吧? $1\leq n,k\leq ...

  8. 七、spring boot 1.5.4 集成shiro+cas，实现单点登录和权限控制

    1.安装cas-server-3.5.2 官网:https://github.com/apereo/cas/releases/tag/v3.5.2 下载地址:cas-server-3.5.2-rele ...

  9. phpstorm 配置 webpack @ 别名跳转

    webstorm中专门有webpack的相关配置,默认的路径直接是项目根目录下的 webpack.config.js,但是我们用各种cli生成的项目中,webpack的配置一般都是在build下,导致 ...

  10. Python 内置函数---map()

    描述 map() 实现对一个可迭代对象中的每一个元素都应用一个函数 将被传入的函数作用到一个可迭代对象的每一个元素上,并且返回了包含了所有这些函数调用结果的一个迭代器. 由于map期待传入一个函数并会 ...