当前位置： 首页 > news >正文

html手势密码解锁插件(附源码)

news 2026/2/19 7:56:40

文章目录

  • 1.设计来源
    • 1.1 界面效果
  • 2.效果和源码
    • 2.1 动态效果
    • 2.2 源代码
  • 源码下载

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/134534785

html手势密码解锁插件(附源码)，仿手机手势密码，拖动九宫格密码，手势密码即3×3的点阵组成的图形密码，密码长度为九位数，代码上手简单，代码独立，可以直接使用。也可直接预览效果。

1.设计来源

1.1 界面效果

    登录界面验证效果，用鼠标点击九个点的任意一个点，拖动连接其他的点，绘制密码，验证登录界面。
    拖动完成，系统验证，如果错误，则弹出错误的提示框，如果正确，处理后进入登录后的主界面。

请添加图片描述

2.效果和源码

2.1 动态效果

    这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的手势登录验证。
请添加图片描述

2.2 源代码

    这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>手势密码登录 - xcLeigh</title><link rel="stylesheet" type="text/css" href="css/mystyle.css" /><!--CSS RESET--><link rel="stylesheet" href="js/mylock.css"><link href="images/favicon.png" rel="icon">
</head>
<body><div class="container"><svg class="patternlock" style="border-bottom:2px dashed #94C2D2; margin-top: 50px;" id="lock" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g class="lock-actives"></g><g class="lock-lines"></g><g class="lock-dots"><circle cx="20" cy="20" r="2"/><circle cx="50" cy="20" r="2"/><circle cx="80" cy="20" r="2"/><circle cx="20" cy="50" r="2"/><circle cx="50" cy="50" r="2"/><circle cx="80" cy="50" r="2"/><circle cx="20" cy="80" r="2"/><circle cx="50" cy="80" r="2"/><circle cx="80" cy="80" r="2"/></g></svg></div><script src="js/jquery-1.11.0.min.js" type="text/javascript"></script><script src="js/mylock.js" charset="utf-8"></script>
</body>
</html>

源码下载

html手势密码解锁插件（源码） 点击下载
在这里插入图片描述

     💢 关注博主 带你实现畅游前后端

     🏰 加入社区 带你体验马航不孤单

     💯 神秘个人简介 带你体验不一样得介绍

     💘 为爱表白 为你那个TA，体验别致的浪漫惊喜

     🎀 酷炫邀请函 带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

     亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/134534785（防止抄袭，原文地址不可删除）

相关文章：

html手势密码解锁插件(附源码)

文章目录 1.设计来源1.1 界面效果 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/134534785 html手势密码解锁插件(附源码)&#xff0c;仿手机手势密码&#xff0c;拖动九…...

编程日记 2023/11/22 6:06:38

Jetson JetPack-5.1.2-L4T-R35.4.1 修复deskew algorithm的问题

1. 前言 官方Orin Nano开发套件 版本： JetPack 5.1.2 2. 问题描述 使用的是带有Orin Nano EVK的GMSL相机，但我无法看到MIPI帧。 这里是媒体设备信息： Media controller API version 5.10.120Media device information ------------------------ driver tegra-…...

编程日记 2023/11/22 6:05:37

Doris的分区表和分桶表

1 列定义 以AGGREGATE KEY数据模型为例进行说明。更多数据模型参阅Doris数据模型。 列的基本类型，可以通过在mysql-client中执行HELP CREATE TABLE; 查看。 AGGREGATE KEY数据模型中，所有没有指定聚合方式（SUM、REPLACE、MAX、MIN）的列视为Key列。而其余则为Value列。 定义…...

编程日记 2023/11/22 6:04:36

华为HCIE技术（HCIP、HCIE）汇总

我所在的岗位是网络运维&#xff0c;路由与交换用的比较多&#xff0c;外网技术比较少。所以把经常用的写的比较详细。大家多多包涵。 理论部分 网络基础&#xff1a;ISO网络七层模型 交换机部分 首次Console口登陆配置Telnet访问 VLAN VLAN的介绍、单交换机vlan划分实验…...

编程日记 2023/11/22 6:03:35

React结合antd5实现整个表格编辑

通过react hooks 结合antd的table实现整个表格新增编辑。 引入组件依赖 import React, { useState } from react; import { Table, InputNumber, Button, Space, Input } from antd;定义数据 const originData [{ key: 1, name: 白银会员, value: 0, equity: 0, reward: 0…...

编程日记 2023/11/22 6:02:34

【C++进阶之路】第八篇：智能指针

文章目录 一、为什么需要智能指针&#xff1f;二、内存泄漏1.什么是内存泄漏&#xff0c;内存泄漏的危害2.内存泄漏分类&#xff08;了解&#xff09;3.如何检测内存泄漏&#xff08;了解&#xff09;4.如何避免内存泄漏 三、智能指针的使用及原理1.RAII2.智能指针的原理3.std:…...

编程日记 2023/11/22 6:01:33

保护服务器免受攻击：解析攻击情境与解决之道

在数字化时代&#xff0c;服务器安全问题日益突出&#xff0c;因为它们是企业和个人网络活动的核心。服务器被攻击可能引发一系列问题&#xff0c;理解攻击的不同情境以及采取相应的解决方法变得至关重要。 DDoS 攻击&#xff08;分布式拒绝服务攻击&#xff09; 情境&#xff…...

编程日记 2023/11/22 6:00:32

Python 获取两个数组中各个坐标点对之间最短的欧氏距离

Python 获取两个数组中各个坐标点对之间最短的欧氏距离 代码如下： import numpy as np from scipy import spatialxy1 = np.array([[243, 3173],[525, 2997]]...

编程日记 2023/11/22 5:58:29

假ArrayList导致的线上事故......

假ArrayList导致的线上事故… 线上事故回顾 晚饭时&#xff0c;当我正沉迷于排骨煲肉质鲜嫩&#xff0c;汤汁浓郁时&#xff0c;产研沟通群内发出一条消息&#xff0c;显示用户存在可用劵&#xff0c;但进去劵列表却什么也没有&#xff0c;并附含了一个视频。于是我一边吃了排…...

编程日记 2023/11/22 5:57:28

K8S精进之路-控制器Deployment-(1)

在K8S中&#xff0c;最小运行单位为POD,它是一个逻辑概念&#xff0c;其实是一组共享了某些资源的容器组。POD是能运行多个容器的&#xff0c;Pod 里的所有容器&#xff0c;共享的是同一个 Network Namespace&#xff0c;并且可以声明共享同一个 Volume。在POD中能够hold住网络…...

编程日记 2023/11/22 5:56:27

flutter iOS 视频mov格式转MP4格式

flutter iOS 视频mov格式转MP4格式 前言一、使用video_compress压缩视频总结 前言 今天在写项目的时候&#xff0c;突然发现iOS 里面的有些视频格式是mov的格式&#xff0c;这就导致在视频播放组件无法播放的问题&#xff0c;期间试过替换视频格式&#xff0c;但是又不想存储文…...

编程日记 2023/11/22 5:55:26

datafilecopy header validation failure for file +DATA/orcl/datafile/file1.ora

环境 linux 6.8 oracle 11.2.0.4 rac 未打补丁 现象&#xff1a; 数据库日志中显示 datafilecopy header validation failure for file DATA/orcl/datafile/file1.ora原因 用rman的backup as copy 对数据文件进行了copy或者叫位置更改时候&#xff0c;在sqlplus中对文件名进行…...

编程日记 2023/11/22 5:54:25

[机缘参悟-119] ：一个IT人的反思：反者道之动；弱者，道之用 VS 恒者恒强，弱者恒弱的马太效应

目录 前言&#xff1a; 一、道家的核心思想 二、恒者恒强&#xff0c;弱者恒弱的马太效应 三、马太效应与道家思想的统一 3.1 大多数的理解 3.2 个人的理解 四、矛盾的对立统一 前言&#xff1a; 马太效应和强弱互转的道家思想&#xff0c;都反应了自然规律和社会规律&…...

编程日记 2023/11/22 5:53:24

CentOS用nginx搭建文件下载服务器

Nginx 是开源、高性能、高可靠的 Web 和反向代理服务器&#xff0c;而且支持热部署&#xff0c;几乎可以做到 7 * 24 小时不间断运行&#xff0c;即使运行几个月也不需要重新启动。在工作中&#xff0c;我们经常会用到需要搭建文件服务器的情况&#xff0c;这里就以在linux下搭…...

编程日记 2023/11/22 5:52:23

Ubuntu下载离线安装包

旧版Ubuntu下载地址 https://old-releases.ubuntu.com/releases/ 下载离线包 sudo apt-get --download-only -odir::cache/ncayu install net-tools下载snmp离线安装包 sudo apt-get --download-only -odir::cache/root/snmp install snmp snmpd snmp-mibs-downloadersudo a…...

编程日记 2023/11/22 5:49:20

【UE】线框材质

一、方式1 新建一个材质&#xff0c;混合模式设置为“已遮罩”&#xff0c;勾选“双面” 勾选“线框” 然后可以随便给一个自发光颜色&#xff0c;这样最基本的线框材质就完成了 二、方式2 新建一个材质&#xff0c;混合模式设置为“已遮罩”&#xff0c;勾选“双面”&#x…...

编程日记 2023/11/22 5:48:19

物联网网关在工业行业的应用与优势

物联网网关在工业行业的应用与优势 随着科技的发展&#xff0c;物联网&#xff08;IoT&#xff09;在各个行业得到了广泛应用。工业行业是其中的一个重要领域。工业行业涉及到许多生产和运输环节&#xff0c;需要不断地监测和控制各个环节的数据和参数。物联网网关&#xff08…...

编程日记 2023/11/22 5:47:18

【excel技巧】单元格内的公式如何隐藏？

Excel文件中最重要的除了数据还有就是一些公式了&#xff0c;但是只要点击单元格&#xff0c;公式就能显示出来&#xff0c;如果不想别人看到公式应该如何设置呢&#xff1f;今天分享隐藏excel单元格数据的方法。 选中单元格&#xff0c;点击右键打开【设置单元格格式】&#x…...

编程日记 2023/11/22 5:46:16

展开语法、剩余语法

展开语法定义 展开语法Spread Syntax&#xff0c;可以在函数调用/数组构造时&#xff0c;将数组表达式或者string在语法层面展开&#xff1b;还可以在构造字面量对象时&#xff0c;将对象表达式按照key-value的方式展开。&#xff08;字面量一般指[1, 2, 3]或者{name:"md…...

编程日记 2023/11/22 5:45:16

MongoDB归并连续号段-（待验证）

实现按照不同条件归并连续号段的方式与具体的数据模型和查询需求有关&#xff0c;以下是一种常见的方式&#xff1a; 假设有一个文档集合&#xff0c;包含如下字段&#xff1a; {"_id": ObjectId("613c3050d5d9b45a0de7c290"),"group": "…...

编程日记 2023/11/22 5:44:15

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2026/2/15 4:21:09

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2026/1/15 21:24:41

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2026/2/18 19:38:24

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2026/2/15 21:39:41

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/2/18 1:20:51

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/8/28 21:52:02

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2026/2/4 10:54:26

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2026/1/23 11:58:06