直接上代码：

目录结构：

本次开用到的技术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. OneZero团队Beta发布剧透

    统计界面暂不透露,尽请期待.

  2. postman 学习网址

    postman使用详解: http://gold.xitu.io/entry/57597a62a341310061337885 https://www.getpostman.com/docs/writ ...

  3. 学习构建一个简单的wcf服务

    入门,构建第一个WCF程序 1.服务端 建立一个控制台应用程序作为Server,新建一个接口IData作为服务契约.这个契约接口一会儿也要放到Client端,这样双方才能遵循相同的标准.别忘了添加对 ...

  4. 【转】在SpringMVC Controller中注入Request成员域

    原文链接:https://www.cnblogs.com/abcwt112/p/7777258.html 原文作者:abcwt112 主题 在工作中遇到1个问题....我们定义了一个Controlle ...

  5. python的logging日志模块

    1. 简单的将日志打印到屏幕 import logging logging.debug('This is debug message') logging.info('This is info mess ...

  6. Java之Set的使用场景

    2.Set使用场景 API介绍: java.util.Set接口和java.util.List接口一样,同样继承自Collection接口, 它与Collection接口中的方法基本一致,并没有对Co ...

  7. office2013 激活方式

    1.下载   KMSpico_setup 2.关闭所有杀毒 3.打开  KMSpico_setup.exe 安装,下一步下一步,完成 4.打开word2013看下还有没弹出过期,没有即成功 5.卸载k ...

  8. myeclipse和maven的clean和build

    转: 详解myeclipse和maven的clean和build 2018年04月20日 11:33:34 群星坠 阅读数:3529   版权声明:本文为博主原创文章,未经博主允许不得转载. http ...

  9. kubernetes 的pod控制器

    转载于网络   pod是kubernetes的最小单元,自主式创建的pod删除就没有了,但是通过资源控制器创建的pod如果删除还会重建.pod控制器就是用于实现代替我们去管理pod的中间层,并帮我们确 ...

  10. mysqldump --master-data=2 --single-transaction

    转载于https://blog.csdn.net/linuxheik/article/details/714808821 mysqldump导出数据主要有两种控制:一种是导出的全过程都加锁 lock- ...