JS 手势图形解锁
来源:互联网 发布:java连接池用线程写 编辑:程序博客网 时间:2024/05/18 01:31
前些天,把我的手机升级到了Android 4.0版本,无意中发现多了一种屏幕解锁方式:图形口令
就是在屏幕上有9个圆点,按3*3的矩阵排列,以这9个圆点为节点,可以随意划出一个几何形状,记下这个几何形状的划动路径,下次为屏幕解锁时按照记忆将这个形状划动出来,就算是解锁成功啦!
体验之后,感觉不错,有一定的可玩性,呵呵
更重要的是,大脑对于记忆一张图形,相比于一串枯燥的字符,还是更有优势的,这对于避免将口令遗忘应该有些帮助
随即就想在WEB上也实现这种图形口令,让WEB的密码输入多一种选择也算是一件好事吧
真正做起来,还算是简单的
首先用PS画了一张底图,上面有16个圆点,按4*4的矩阵排列,至于为什么要用4*4,主要是3*3的矩阵感觉有点小,组合也比较简单。4*4的话,安全性相对要更高些,另外,16个节点,正好可以使用16进制的0~9和A~F来表示。再大的话,比如5*5,貌似有点过于复杂了,怕是自己划出的图形都会很难记住,那样就得不偿失啦。
底图:
哈哈,还不错吧,自我感觉很是唯美 :)
底图做好之后,开始写脚本
在WEB上画线,并非头一次,考虑到对IE、FF、Opera的兼容性,首先将VML、PNG等方式Pass掉,至于SVG,对于老版本的IE支持也不太友好,还是放弃了,Flash倒是好选择,不过嫌麻烦,最后还是决定使用最原生态的办法:JS+DIV
经过3个多小时的敲敲打打,很是新鲜的WEB版图形口令就算大功告成啦!
效果预览:
点击确定后,返回的口令原文:
在划线时,又增加了预览的效果,感觉好多了。
WEB版的图形口令就算搞定了,至于如何嵌入到项目里使用,就很简单了,这里不再敖述。
附件下载地址:http://files.cnblogs.com/netWild/图形口令(DrawPass).zip
- JS 手势图形解锁
- 手势密码 图形解锁 实现
- 手势解锁
- 手势解锁
- 手势解锁
- 手势解锁
- 手势解锁
- 指纹解锁和手势解锁
- android手势解锁说明
- android-手势解锁
- android LockPattern手势解锁
- 手势解锁知识点学习
- 80-手势解锁
- ios手势解锁
- IOS手势解锁
- CYC- 手势解锁
- iOS-手势解锁
- iOS手势解锁
- 块设备驱动程序分析之内存模拟磁盘
- JavaScript共同工具类库jutil
- POJ 2707 水题,输入输出
- Android中左右滑屏实现
- session 中对象实例在不同事务中的状态
- JS 手势图形解锁
- gridview控件使用心得
- 系统每天自动关闭设置
- 快设备驱动程序之是内存模拟的磁盘支持格式化
- 初学者对通讯录软件开发的整体把握与分块实现----为通讯录设置相应的头像
- 这几天的学习生活
- Android KSOAP2完成3种对象序列化网络传输(POJO)
- 块设备驱动程序之nandflash——基础知识
- vsftp 登录报错:500 OOPS: cannot change directory:/home/*******