直接上代码：

目录结构：

本次开用到的技术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. 原理分析dubbo分布式应用中使用zipkin做链路追踪

    zipkin是什么 Zipkin是一款开源的分布式实时数据追踪系统(Distributed Tracking System),基于 Google Dapper的论文设计而来,由 Twitter 公司开 ...

  2. Java 工厂方法模式

    在工厂对象上调用创建方法,生成接口的某个实现的对象 通过这种方式,接口与实现分离 方法接口 /** * 方法接口 */ public interface Service { void method1( ...

  3. java学习三 小数默认为double

    前++,后++在独立运算时候 直接计算出值 当后加加和减减和其他代码在一行的时候先使用加加和减减之前的值, 如果不在同一行,后面的一行就会得到加加或减减后的值 &&是逻辑运算符,逻辑运 ...

  4. Codeforces Round #530 Div. 1 自闭记

    A:显然应该让未确定的大小尽量大.不知道写了啥就wa了一发. #include<iostream> #include<cstdio> #include<cmath> ...

  5. The Accomodation of Students HDU - 2444(判断二分图 + 二分匹配)

    The Accomodation of Students Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...

  6. 【BZOJ1413】[ZJOI2009]取石子游戏（博弈论，动态规划）

    [BZOJ1413][ZJOI2009]取石子游戏(博弈论,动态规划) 题面 BZOJ 洛谷 题解 神仙题.jpg.\(ZJOI\)是真的神仙. 发现\(SG\)函数等东西完全找不到规律,无奈只能翻题 ...

  7. winform程序关闭界面时弹出提示框

    void Form1_FormClosing(object sender, FormClosingEventArgs e){ if (MessageBox.Show( "窗口关闭后,数据即将 ...

  8. 记踩坑--Flask Web开发：S6电子邮件 ----[Errno 11004] getaddrinfo failed

    必须要记录下踩过的坑,一来,为后来者铺路,二来,实在摔得疼,提醒自己写代码要谨小慎微. [Errno 11004] getaddrinfo failed 1.先排除邮箱账号和授权码的错误 测试如下代码 ...

  9. Ubantu里面的Sublime Text3不支持中文的解决办法

    参考的大佬链接:https://github.com/lyfeyaj/sublime-text-imfix 更新然后将系统升级到最新版本,在linux终端输入 sudo apt-get update ...

  10. python BeautifulSoup

    之前解析LXML,用的是XPath,现在临时被抓取写爬虫,接人家的代码,看到用的是BeautifulSoup,稍微学了下,也挺好用的,简单记录下用法,有机会做下和Xpath的对比测试 初始化 from ...