直接上代码：

目录结构：

本次开用到的技术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. 扩展名为DBF的是什么文件啊？

    扩展名为DBF的文件: .dbf文件是dBase和FoxPro所使用的数据库格式,在没有这两种软件的情况下,可以使用Excel打开文件.在Excel的“打开”文件的对话框中,选择文件类型为“dBase ...

  2. net 和Mono 构建的HTTP服务框架

    Nancy是一个基于.net 和Mono 构建的HTTP服务框架,是一个非常轻量级的web框架. 设计用于处理 DELETE, GET, HEAD, OPTIONS, POST, PUT 和 PATC ...

  3. 自学Aruba1.2-WLAN一些基本常识802.11n速率计算方式、802.11n及802.11AC速率表

    点击返回:自学Aruba之路 自学Aruba1.2-WLAN一些基本常识802.11n速率计算方式.802.11n及802.11AC速率表 1. 802.11n速率计算方式 以802.11g的54M最 ...

  4. 解题：APIO 2018 铁人两项

    题面 建立圆方树,考虑所有路径,发现路径上原来的点双(现在的方点)里的点都可以做中间点.但是路径上被方点夹着的圆点被计重了,要扣掉:枚举的两个端点也被算进去了,要扣掉.所以直接将方点权值设为点双大小, ...

  5. redirect和forward的区别

    异同 1.从地址栏显示来说 forward是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发给浏览器.浏览器根本不知道服务器发送的内容从哪里来的,所以 ...

  6. C++并发编程实战---阅读笔记

    1. 当把函数对象传入到线程构造函数中时,需要避免“最令人头痛的语法解析”.如果传递了一个临时变量,而不是一个命名的变量:C++编译器会将其解析为函数声明,而不是类型对象的定义. 例如: class ...

  7. webpack进阶--loader

    webpack的核心就是它的配置文件,只要配置好配置文件webpack就可以用得利索-- 而配置文件主要就是7个部分entry.output.plugins.resolve.devserver(web ...

  8. 利用CSS3实现简书中点击“喜欢”时的动画

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

  9. 2018年11月25日ICPC焦作站参赛总结

    可能就这么退役了吧. 对这次ICPC还是比较有信心的,毕竟心态都放平和了. 路途很波折,热身赛还是赶上了. 等到了正赛的时候,开场看出了A题的签到,签到肯定是我来签的,11分钟签完了这道题之后,开始看 ...

  10. Linux命令（八）Linux系统信息相关命令

    top: