H5移动端手势密码组件

项目简介


最近参加了2017年360前端星计划，完成了一个有趣的UI组件开发大作业，借机和大家分享一下移动端开发的技术啦~~

本项目采用原生JS和Canvas实现移动端手势密码组件，支持手势密码设置和验证。

先加星后看，年薪百万！欢迎大家关注我的github，互相学习~~

     demo演示地址：http://tangzhirong.github.io/lock/example/demo.html

     项目github地址：https://github.com/tangzhirong/mobile-lock

     我的github地址：https://github.com/tangzhirong

  效果


  特点

  • 移动端不同尺寸设备适配：采用css media query和rem设置字体大小
  • 支持自定义参数：手势区大小、标题等
  • 解决部分安卓手机touch事件兼容性问题

 推荐文章


想要了解如何做H5移动端开发的朋友，推荐两篇我认为写的不错的文章，以供参考：

H5移动端适配相关文章：http://www.mamicode.com/info-detail-864013.html

H5移动端兼容性相关文章：http://www.cnblogs.com/shenjp/p/6517525.html

时间： 2024-10-06 20:45:17

H5移动端手势密码组件的相关文章

h5手势密码开发(使用jq)

直接上代码: 目录结构: 本次开用到的技术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, init

jquery之手势密码

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery手势密码</title> </head> <body> <center><br><br> 正确的密码是一个字母“Z”的形状哦!<br><br> <div i

APP手势密码绕过

之前写的文章收到了很多的好评,主要就是帮助到了大家学习到了新的思路.自从发布了第一篇文章,我就开始筹备第二篇文章了,最终打算在07v8首发,这篇文章我可以保障大家能够学习到很多思路.之前想准备例子视频,请求了很多家厂商进行授权,但是涉及漏洞信息方面的,厂商都是很严谨的,所以,整个过程没有相关的实际例子,但是我尽可能的用详细的描述让大家能够看得懂.大家不要睡着呦~ 说到APP手势密码绕过的问题,大家可能有些从来没接触过,或者接触过,但是思路也就停留在那几个点上,这里我总结了我这1年来白帽子生涯当中

vue项目中实现手势密码

本来是写在一个页面中的,但后来一想创建和登录的时候都得用,干脆就写成组件吧.自知写的很差,还望各位大佬指教一二 父组件中不传值的话就默认是创建手势密码(创建时密码长度不能小于4),需要输入两次,两次密码必须一致 如果是登录,父组件就把密码传给子组件,子组件就会根据密码判断当前输入是否正确,具体执行时请看控制台 演示: 父组件未传值,此时是创建手势密码 登录时,父组件穿的值为<gestureUnlock :fatherPassword="[1,2,3,4,5]"></g

［优化］Swift 简简单单实现手机九宫格手势密码 解锁

我去 为毛这篇文章会被移除首页 技术含量还是有点的   如果在此被移除  那就果断离开园子了 之前的文章 Swift 简简单单实现手机九宫格手势密码解锁 1.对之前的绘制线条的方法进行优化 之前是遍历选中点的集合分别的在点之间绘制线条 改进之后使用系统的API一口气将线条绘制出来 2.增加密码错误情况下想某宝一样红色提示和三角形状的路线指示如下图所示 3.遇到的难点主要是三角形的绘制 和 旋转角度的功能 原理就不多说了 真相见代码 转载需要注明出处 http://www.cnblogs.com/

空间手势密码的实现

一.团队介绍 首先还是要介绍一下我们的团队.我们的队名是"来不及了快上车".队长:黄玥.成员:谢园,宋丰年,潘子帅,张帆,高宇轩. 这里是所有队员的链接: 黄玥:http://www.cnblogs.com/hy1234/ 谢园:http://www.cnblogs.com/KKKA/ 宋丰年:http://www.cnblogs.com/Iriya/ 潘子帅:http://www.cnblogs.com/ss961011/ 张帆:http://www.cnblogs.com/ZFyo

Andriod手势密码破解

★ 引子 之前在Freebuf上看到一片文章讲Andriod的手势密码加密原理,觉得比较有意思,所以就写了一个小程序试试. ★ 原理            Android的手势密码加密原理很简单: 先给屏幕上的每一个点编号(一般是 3 X 3): 00,01,02 03,04,05 06,07,08 注意这里的数字都是十六进制. 假设我沿着左边和下边画了一个 L 字,则手势的点排列顺序 sequence 是 00,03,06,07,08. 然后计算密文 C = SHA-1(sequence),然

HTML5 Canvas简简单单实现手机九宫格手势密码解锁

原文:HTML5 Canvas简简单单实现手机九宫格手势密码解锁 早上花了一个半小时写了一个基于HTML Canvas的手势解锁,主要是为了好玩,可能以后会用到. 思路:根据配置计算出九个点的位置,存入一个数组,当然存入数组的顺序的索引是: 第一行:0   1  2   第二行:3  4  5 第三行:6  7  8 然后就根据这个坐标数组去绘制九个点 再则我们需要一个保存选中点的数组,每当touchmove事件就判断当前触摸点和那个点的距离小于圆的半径  如果为真的话 那么就添加进入选中点的数

支付宝钱包手势密码破解实战

背景 随着移动互联网的普及以及手机屏幕越做越大等特点,在移动设备上购物.消费已是人们不可或缺的一个生活习惯了.随着这股浪潮的兴起,安全.便捷的移动支付需求也越来越大.因此,各大互联网公司纷纷推出了其移动支付平台.其中,用的比较多的要数腾讯的微信和阿里的支付宝钱包了.就我而言,平时和同事一起出去AA吃饭,下班回家打车等日常生活都已经离不开这两个支付平台了. 正所谓树大招风,移动支付平台的兴起,也给众多一直徘徊在网络阴暗地带的黑客们又一次重生的机会.因为移动平台刚刚兴起,人们对移动平台的安全认识度还