手势密码锁

360前端星计划作业

功能

• 设置手势密码，保存在localStorage
• 验证输入的手势密码与localStorage中保存的手势密码是否一致

设计思路

1. 触摸开始时
   1. 若触摸点在解锁圆圈上，记录圆圈位置
   2. 初始化解锁区
   3. 高亮所有记录的圆圈
2. 触摸点移动时
   1. 若触摸点在解锁圆圈上，判断这个圆圈是否被记录过，若没有再将圆圈位置记录
   2. 初始化解锁区
   3. 高亮所有记录的圆圈
   4. 将所有记录圆圈按顺序用线连接，并将最后一个圆圈和触摸点连接起来
3. 触摸点离开屏幕时
   1. 将手势密码转换为文字密码
   2. 设置密码时，判断第一次输入的密码长度是否达标，若达标则记录在暂存区，等待第二次输入密码。若两次输出一致，将密码存放在localStorage中
   3. 验证密码时，取出localStorage中的密码，和输入密码比较，输出比较结果

DEMO

demo，pc端请使用浏览器的模拟移动设备功能后打开。

作者

孙锐 [email protected]