• Stars
    star
    116
  • Rank 303,894 (Top 6 %)
  • Language
    JavaScript
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

手势解锁密码的 demo

手势密码设置和解锁的实现

这是第三届360前端星计划在线作业的参考实现。

在线例子

在线示例

扫描二维码

安装和使用

直接在浏览器里引用:

<script src="https://s2.ssl.qhres.com/!9f2db498/HandLock-0.2.1.min.js"></script>

API

Locker

创建一个可以设置密码和验证密码的实例

var password = '11121323';

var locker = new HandLock.Locker({
  container: document.querySelector('#handlock'),
  check: {
    checked: function(res){
      if(res.err){
        console.error(res.err); //密码错误或长度太短
      }else{
        console.log(`正确,密码是:${res.records}`);
      }
    },
  },
  update:{
    beforeRepeat: function(res){
      if(res.err){
        console.error(res.err); //密码长度太短
      }else{
        console.log(`密码初次输入完成,等待重复输入`);
      }
    },
    afterRepeat: function(res){
      if(res.err){
        console.error(res.err); //密码长度太短或者两次密码输入不一致
      }else{
        console.log(`密码更新完成,新密码是:${res.records}`);
      }
    },
  }
});

locker.check(password);

几种 err 状态

  • ERR_NOT_ENOUGH_POINTS 绘制的点数量不足,默认为最少4个点
  • ERR_PASSWORD_MISMATCH 密码不一致,check时密码不对或者update时两次输入密码不一致
  • ERR_USER_CANCELED 用户切换验证或设置操作时,取消当前的状态

可配置的参数

//recorder.js
const defaultOptions = {
  container: null, //创建canvas的容器,如果不填,自动在 body 上创建覆盖全屏的层
  focusColor: '#e06555',  //当前选中的圆的颜色
  fgColor: '#d6dae5',     //未选中的圆的颜色
  bgColor: '#fff',        //canvas背景颜色
  n: 3, //圆点的数量: n x n
  innerRadius: 10,  //圆点的内半径
  outerRadius: 25,  //圆点的外半径,focus 的时候显示
  touchRadius: 35,  //判定touch事件的圆半径
  render: true,     //自动渲染
  customStyle: false, //自定义样式
  minPoints: 4,     //最小允许的点数
};
//locker.js
const defaultOptions = {
  update: {
    beforeRepeat: function(){}, //更新密码第一次输入后的事件
    afterRepeat: function(){}   //更新密码重复输入后的事件
  },
  check: {
    checked: function(){} //校验密码之后的事件
  }
}

clearPath()

清除 canvas 上选中的圆。

cancel()

取消当前状态,用于update/check状态切换。

修改和发布代码

下载仓库并安装依赖:

npm install

启动服务:

npm start

发布代码:

npm run deploy

License

MIT

More Repositories

1

FE_You_dont_know

分享在前端开发中,你不知道的JavaScript、CSS和HTML趣味知识,增加你的知识面。
JavaScript
953
star
2

ICG-WebGL

交互式计算机图形学——基于WebGL的自顶向下方法(第七版)的例子与练习题
JavaScript
766
star
3

moyu

Github 摸鱼大全!
599
star
4

graphics

一些图形系统相关的小例子
JavaScript
498
star
5

code-to-image

Convert blocks of code to a highlighted jpeg base64 image.
JavaScript
273
star
6

matrix

Open source slideshare lab for user to create slideshares by reveal.js.
JavaScript
158
star
7

http-modular

A universal library for converting server-side functions into ES Modules.
JavaScript
116
star
8

wxdev

微信开发简明教程
JavaScript
106
star
9

jcode-awesome

码上掘金精选,收集优秀的码上掘金项目,供大家一起学习研究
JavaScript
99
star
10

sublime-gbk

support file with gbk encoding
Python
92
star
11

rpio2

Control Raspberry Pi GPIO pins with node.js. Fast and easy to use.
JavaScript
90
star
12

gl-renderer

JavaScript
88
star
13

node-canvas-webgl

Integration of node-canvas and headless-gl.
JavaScript
81
star
14

sublime-v8

v8 engine for sublime text 2
Python
79
star
15

animator.js

A mini (1.6kb compressed and 1.1kb gziped!) high-performance animation library. Provide promise-based API.
JavaScript
77
star
16

core-wrappers

ES5 function wrappers and ES7/ES2016 decorators.Works great with React/Angular/more!
JavaScript
74
star
17

think-wechat

微信中间件,同时支持 thinkJS 3.0
JavaScript
73
star
18

babel-plugin-transform-gl-matrix

A babel plugin for gl-matrix.
JavaScript
68
star
19

bullshit-generator-js

狗屁不通文章生成器改进版
JavaScript
58
star
20

glsl-doodle

Drawing patterns with glsl shaders on modern browsers.
GLSL
58
star
21

wait-promise

Make a promise, waiting for a specified amount of time, util something is done.
JavaScript
55
star
22

svg-path-to-canvas

Convert SVG d path to canvas commands
JavaScript
45
star
23

await-signal

A simple promise-based signal system for running async tasks.
JavaScript
44
star
24

flappy_bird

flappy bird using cocos2d-html5 and cqwrap
D
44
star
25

remote

Allowing your PC web page to be remote controlled by mobile device
JavaScript
35
star
26

js-expression

High Performance JavaScript Expression Evaluator
JavaScript
29
star
27

http-with-nodejs

从前端到全栈的课程示例代码——实现HTTP服务器
JavaScript
27
star
28

babel-plugin-transform-private

A plugin provide private fields in ES6+ class
JavaScript
26
star
29

a_tour_with_chatgpt

ChatGPT 带你玩转太阳系
21
star
30

upvote-anywhere

Generate a SVG button that allows you to get upvoted anywhere.
JavaScript
18
star
31

consoli

Output the content of console to a DOM element.
JavaScript
14
star
32

lafe

Smaty3的扩展,前端Layout框架,用来定位和输出数据到复杂的页面模块组合中
PHP
13
star
33

intersection

Control a remote web page with your tablet or your mobile phone.
JavaScript
13
star
34

js-homework

特训营 JavaScript 作业
HTML
11
star
35

jsypar

能生成Javascript版编译机的yacc
Perl
10
star
36

Farseer-QWDIY

集成Nginx+CodeIgniter+Smarty3+QWrap
PHP
10
star
37

babel-plugin-transform-coverage

A plugin for Babel 6 that converts the source code to the code with coverage measurement for jscover.
JavaScript
9
star
38

currying-wy

文言之柯裡化法
6
star
39

go

A cross platform go game
JavaScript
6
star
40

pi-node-apps

用 node.js 开发树莓派的例子
JavaScript
6
star
41

JKit

JKit is a php-framework based on kohana 3.2+
PHP
6
star
42

structured-data-view

Make it easier to play with array buffer.😘
JavaScript
6
star
43

boxbox

JavaScript
5
star
44

nova

The android framework that uses html5 to build UI.
JavaScript
5
star
45

think-leancloud

thinkjs leancloud api
JavaScript
5
star
46

highcharts-for-qwrap

the qwrap adapter of highcharts
JavaScript
4
star
47

cocos2dx-cqwrap

javascript binding extensions for cocos2d-x
C
4
star
48

Kohana-python

This module let python classes work with kohana framework
Python
3
star
49

babel-transform-tutorial

JavaScript
3
star
50

kelou-wy

文言之刻漏
2
star
51

cqwrap

the cocos2d-html5 game creator
JavaScript
2
star
52

assets

2
star
53

aircode-app

A simple web app framework for AirCode.
JavaScript
2
star
54

wenyan-demos

demosify cases for wenyan-lang
JavaScript
2
star
55

Traingulate-lib

Tools for compatible triangulations of simple polygons
C#
1
star
56

gpu-renderer

JavaScript
1
star
57

blog

我的博客
HTML
1
star
58

openai-sh

Fast ChatGPT CLI powered by Azure OpenAI.
TypeScript
1
star
59

todolist

JavaScript
1
star
60

cqwrap-x

the cocos2d-x for javascript with cqwrap
JavaScript
1
star
61

todolist-thinkjs

Simple GTD-style todo list.
HTML
1
star
62

airdb-lite

A local file database.
JavaScript
1
star
63

async-wy

文言之異步秘術
1
star
64

http-connect

a module that make http instance compatible with connect middleware
JavaScript
1
star
65

soltarie.js

经典接龙的js AI版
JavaScript
1
star
66

fast-animation-frame

Cross-platform requestAnimationFrame. Super fast.
JavaScript
1
star