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

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

news 2026/5/8 20:51:30

文章目录

  • 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

FeedOracle v6.0：为AI Agent构建可验证合规证据的自治预言机网络

1. 项目概述&#xff1a;从合规服务器到自治预言机网络的蜕变如果你正在构建或使用AI Agent来处理金融、法律或任何受监管的业务&#xff0c;那么“合规证据”这个痛点你一定不陌生。Agent可以帮你分析数据、生成报告&#xff0c;但如何向审计方、监管机构甚至法庭证明&#xf…...

编程新知 2026/5/8 19:52:18

Google Engineering Practices：一站式版本控制策略终极指南

Google Engineering Practices&#xff1a;一站式版本控制策略终极指南 【免费下载链接】eng-practices Googles Engineering Practices documentation 项目地址: https://gitcode.com/gh_mirrors/en/eng-practices Google Engineering Practices 是一套全面的软件工程实…...

编程新知 2026/5/8 18:55:34

在Agent工作流中集成Taotoken实现稳定且低成本的多模型调用

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在Agent工作流中集成Taotoken实现稳定且低成本的多模型调用 构建自动化AI工作流的开发者&#xff0c;常常需要依赖大模型API来完成…...

编程新知 2026/5/8 17:48:48

大模型时代，软件测试的“变”与“不变”

随着大语言模型技术的爆发式演进&#xff0c;软件测试领域正经历一场前所未有的深度变革。从传统的脚本化验证到如今的智能体驱动测试&#xff0c;大模型不仅重塑了测试工具链&#xff0c;更在根本上动摇了沿用数十年的测试方法论。对于广大软件测试从业者而言&#xff0c;我们…...

编程新知 2026/5/8 17:44:45

3分钟掌握抖音批量下载：从手动复制到智能获取的全新工作流

3分钟掌握抖音批量下载&#xff1a;从手动复制到智能获取的全新工作流 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback s…...

编程新知 2026/5/8 16:27:03

3分钟搞定！Applite镜像加速让macOS软件下载飞起来 [特殊字符]

3分钟搞定&#xff01;Applite镜像加速让macOS软件下载飞起来 &#x1f680; 【免费下载链接】Applite User-friendly GUI macOS application for Homebrew Casks 项目地址: https://gitcode.com/gh_mirrors/ap/Applite 还在为Homebrew下载软件慢如蜗牛而烦恼吗&#xf…...

编程新知 2026/5/8 13:41:25

火山引擎AI技能开发框架：统一封装与编排实践

1. 项目概述&#xff1a;一个面向火山引擎的AI技能开发框架最近在折腾AI应用开发&#xff0c;特别是想基于国内的主流云平台快速落地一些智能对话或处理能力。相信很多同行也遇到过类似的需求&#xff1a;公司业务需要接入AI&#xff0c;但自研模型成本高、周期长&#xff0c;直…...

编程新知 2026/5/8 13:15:24

区域岩柱最大厚度分布数据集

摘要本数据集来源于 Macrostrat 平台公开 API 的 columns 接口&#xff0c;采用 GeoJSON 格式组织&#xff0c;当前包含 1 个核心文件、约 4.47 MB 数据量和 1923 个面要素。数据以区域岩柱或核心柱状区块为基本空间单元&#xff0c;集成了柱状体标识、地层年龄范围、厚度、主要…...

编程新知 2026/5/8 12:42:04

保姆级教程：用LAMMPS模拟单晶铜纳米压痕，从建模到出图一步到位

零基础实战&#xff1a;LAMMPS单晶铜纳米压痕模拟全流程解析 第一次打开LAMMPS的in文件时&#xff0c;那些密密麻麻的代码行就像天书——这是我带过的研究生小张的原话。作为材料模拟领域的入门课题&#xff0c;单晶铜纳米压痕确实是最佳练手项目&#xff0c;但90%的新手会在环…...

编程新知 2026/5/8 10:49:45

多模态AI视觉语言模型优化与强化学习实践

1. 项目背景与核心价值去年在部署某智能客服系统时&#xff0c;我们发现传统视觉语言模型&#xff08;VLM&#xff09;存在一个致命缺陷——当用户上传一张模糊的产品照片并询问"这个配件该怎么安装"时&#xff0c;系统要么给出笼统的安全提示&#xff0c;要么完全偏…...

编程新知 2026/5/8 9:11:06