JavaScript仿手机锁屏手滑式验证

JavaScript仿手机锁屏手滑式验证源码下载

看看谁在用

查看文件结构

文件大小:0.04M

资源分类: 插件-其它前端代码

更新时间: 2022-07-21

一个 JavaScript 库 (es6),可让您创建基于画布的模式锁定屏幕,以保护Web应用程序上的内容。
先创建一个画布
<canvas id="example"></canvas>
创建新的锁屏图案
const myLock = PatternLock({
      $canvas: document.querySelector('#example')
});
定义高度和宽度
const myLock = PatternLock({
      $canvas: document.querySelector('#example'),
      width: 300, // default
      height: 430 // default
});
定义几行几列
const myLock = PatternLock({
      $canvas: document.querySelector('#example'),
      grid: [3, 3]
});
定义样式
const myLock = PatternLock({
      $canvas: document.querySelector('#example'),
      theme: 'default' // or success, and failure
});
也可以自定义样式
patternLock.setTheme({
  colors: {
    accent: '#1abc9c',     // Accent color for node
    primary: '#ffffff',    // Primary node and line color
    bg: '#2c3e50',         // Canvas background color
  },
  dimens: {
    node_radius: 20,       // Radius of the outer ring of a node
    line_width: 6,         // Thickness of the line joining nodes
    node_core: 8,          // Radius of the inner circle of a node
    node_ring: 1,          // Outer ring thickness
  }
});
画完后可以处理一些事件
myLock.onComplete(({ hash }) => (myRealHash === hash) ? success() : failure());
处理结果
lock.matchHash('MTA1MDA0MzEw')
.onSuccess(() => lock.setTheme('success'))
.onFailure(() => lock.setTheme('failure'));

JavaScript仿手机锁屏手滑式验证

正在加载文件目录...

也许你还喜欢

  1. JavaScript文本逐渐放大靠近特效
  2. Timeline时间轴js小部件代码
  3. 文章列表样式svg喜欢按钮点赞特效
  4. 纯CSS ToolTip提示工具
  5. css背景伪元素before和after
  6. js+css3快乐的皮卡丘网页动画代码
一个神奇的按钮动作HTML/CSS
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备20015882号-5
  • 背景样式编辑器|按钮样式编辑器|背景动效编辑器|图片布局编辑器