滑动验证码
先上图
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>滑动验证码</title><style>* {margin: 0;padding: 0;}.box {position: relative;width: 375px;margin: 100px auto;}.check {width: 375px;height: 250px;background-size: 100% 100%;background-image: url("https://img0.baidu.com/it/u=1566675905,2132741662&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");}.check-content {position: absolute;top: 100px;left: 280px;width: 50px;height: 50px;background: rgba(0, 0, 0, 0.5);border: 1px solid #ffffff;}.check-block {width: 50px;height: 50px;border: 1px solid #ffffff;background-image: inherit;background-repeat: inherit;background-size: 375px 250px;background-position: -280px -100px;position: absolute;top: 100px;left: 10px;}.drag {width: 375px;height: 50px;background-color: #e3e3e3;margin-top: 10px;position: relative;}.drag-block {width: 50px;height: 50px;background: yellowgreen;z-index: 10;position: absolute;top: 0;left: 0;}.drag-tips {width: 95%;height: 100%;margin: 0 auto;text-align: center;line-height: 50px;font-size: 12px;color: #8a8a8a;}</style>
</head>
<body>
<div class="box"><div class="check"><div class="check-content"></div><div class="check-block"></div></div><div class="drag"><div class="drag-block"></div><div class="drag-tips">按住左边按钮向右拖动完成上方图形验证</div></div>
</div><script>// 获取校验区const drag = document.querySelector('.drag')// 获取两个滑块和拖动按钮const dragBlock = document.querySelector('.drag-block')const content = document.querySelector('.check-content')const check = document.querySelector('.check-block')// 随机生成一个x,y坐标 用于设置校验块的位置let x = parseInt(Math.random() * 325)let y = parseInt(Math.random() * 200)// 定义一个运动状态 如果为true代表鼠标已经按下let animating = false// 存储鼠标按下的x坐标let startX = 0// 存储移动的位置let offsetX = 0content.style.cssText = `left:${x}px;top:${y}px`check.style.cssText = `background-position:-${x}px - ${y}px;top:${y}px`// 添加鼠标移动事件drag.addEventListener('mousemove', e => {// 判断运动状态if (!animating) {return}// 计算移动的位置offsetX = e.pageX - startX// 判断移动距离是否正确if (offsetX < 0 || offsetX > 350) {return}// 修改可移动盒子的x轴坐标dragBlock.style.transform = `translateX(${offsetX}px)`// 设置被验证滑块的left值check.style.left = `${offsetX}px`})// 添加鼠标按下事件dragBlock.addEventListener('mousedown', (e) => {animating = truestartX = e.pageX})// 添加鼠标弹起事件document.addEventListener('mouseup', () => {animating = false// 根据移动的位置判断是否成功if (offsetX >= x - 2 && offsetX <= x + 2) {alert('成功')} else {// 验证失败 滑块和被验证块回复坐标dragBlock.style.transform = `translateX(0px)`check.style.left = `0px`}})
</script>
</body>
</html>
相关文章：
滑动验证码
先上图 代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>滑动验证码</title><style>* {margin: 0;padding: 0;}.box {position: relative;width: 375px;margin: 100px a…...
数据爬取+可视化实战_告白气球_词云展示----酷狗音乐
一、前言 歌词上做文本分析，数据存储在网页上，需要爬取数据下来，词云展示在工作中也变得日益重要，接下来将数据爬虫与可视化结合起来，做个词云展示案例。 二、代码 # -*- coding:utf-8 -*- # 酷狗音乐 通过获取每首歌…...
rkmedia_vi_get_frame_test.c 代码解析
使用示例： 录像： rkmedia_vi_get_frame_test -a /etc/iqfiles/ -I 1 -o 1080.nv12 然后用yuvplayer.exe可以播放。 录像10帧： rkmedia_vi_get_frame_test -a /etc/iqfiles/ -I 1 -o 1080.nv12 -c 10 解析代码： #include <as…...
探究Kafka原理-3.生产者消费者API原理解析
👏作者简介：大家好，我是爱吃芝士的土豆倪，24届校招生Java选手，很高兴认识大家📕系列专栏：Spring源码、JUC源码、Kafka原理🔥如果感觉博主的文章还不错的话，请ὄ…...
Linux系统iptables扩展
目录 一. iptables规则保存 1. 导出规则保存 2. 自动重载规则 ①. 当前用户生效 ②. 全局生效 二. 自定义链 1. 新建自定义链 2. 重命名自定义链 3. 添加自定义链规则 4. 调用自定义链规则 5. 删除自定义链 三. NAT 1. SNAT 2. DNAT 3. 实验 ①. 实验要求 ②. …...
Openwrt 系统安装 插件名称与中文释义
系统镜像 当时是去官网找对应的，但是作为门外汉，想简单，可以试试这个网站 插件 OpenWrt/Lede全部插件列表功能注释...
[原创]Delphi的SizeOf(), Length(), 动态数组, 静态数组的关系.
[简介] 常用网名: 猪头三 出生日期: 1981.XX.XXQQ: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、Delphi…...
：bind_front)
C++(20)：bind_front
C(11)：bind_c11 bind_风静如云的博客-CSDN博客 提供了方法来绑定函数参数的方法。 C20提供了bind_front用于简化这个绑定。 #include <iostream> #include <functional> using namespace std;void func1(int d1, int d2) {cout<<__func__<&l…...
【spring】bean的后处理器
目录 一、作用二、常见的bean后处理器2.1 AutowiredAnnotationBeanPostProcessor2.1.1 说明2.1.2 代码示例2.1.3 截图示例 2.2 CommonAnnotationBeanPostProcessor2.2.1 说明2.2.2 代码示例2.2.3 截图示例 2.3 ConfigurationPropertiesBindingPostProcessor2.3.1 说明2.3.2 代码…...
Centos7安装docker、java、python环境
文章目录 前言一、docker的安装二、docker-compose的安装三、安装python3和配置pip3配置python软链接（关键） 四、Centos 7.6操作系统安装JAVA环境 前言 每次vps安装docker都要看网上的文章，而且都非常坑，方法千奇百怪，…...
简单小结类与对象
/*** Description 简单小结类与对象*/ package com.oop;import com.oop.demo03.Pet;public class Application {public static void main(String[] args) {/*1.类与对象类是一个模版：抽象，对象是一个具体的实例2.方法定义、调用！3.对象的引用…...
 ?)
ABAP 如何获取内表行的索引值(index) ?
获取索引值 在ABAP中，如果需要获取一个内表中某条记录的索引（index），可以使用 READ TABLE 语句。在 READ TABLE 语句后面的 WITH KEY 子句可以指定搜索条件，如果找到了匹配的记录，系统字段 SY-TABIX 将保存…...
ESP32-Web-Server编程- 使用表格（Table）实时显示设备信息
ESP32-Web-Server编程- 使用表格（Table）实时显示设备信息 概述 上节讲述了通过 Server-Sent Events（以下简称 SSE） 实现在网页实时更新 ESP32 Web 服务器的传感器数据。 本节书接上会，继续使用 SSE 机制在网页实时显…...
vue3 Hooks函数使用及常用utils封装
hooks 是什么 vue3使用了composition API，我们可自定义封装hooks，达到复用，在Vue2中采取的mixins，对mixins而言， hooks更清楚复用功能代码的来源, 更清晰易懂。 简单来说：hooks 就是函数的一种写法…...
matlab 无迹卡尔曼滤波
1、内容简介 略 26-可以交流、咨询、答疑 2、内容说明 无迹卡尔曼滤波 无迹卡尔曼滤波 无迹卡尔曼滤波 3、仿真分析 %该文件用于编写无迹卡尔曼滤波算法及其测试 %注解：主要子程序包括：轨迹发生器、系统方程 % 测量方程、UKF滤波器 %----…...
大脑--学习方法
1.大脑喜欢色彩。平时使用高质量的有色笔或使用有色纸，颜色能帮助记忆。 2.大脑集中精力最多只有25分钟。这是对成人而言，所以学习20到30分钟后就应该休息10分钟。你可以利用这段时间做点家务，10分钟后再回来继续学习，效果会更好…...
4.C转python
1.建立函数: def 函数名(形参): 函数体(记得写缩进) return 返回值(python中可以没有return) 2.调用函数: 函数名(实参) 实参和形参个数相等即可,类型不需要相同 其中接收返回值与C中的差不多 3.如果只是定义而不调用则函数不会执行 4.先定义函数,后调用 5.python中可以…...
YOLOv5项目实战（5）— 算法模型优化和服务器部署
前言：Hello大家好，我是小哥谈。近期，作者所负责项目中的算法模型检测存在很多误报情况，为了减少这种误报情况，作者一直在不断优化算法模型。鉴于此，本节课就给大家详细介绍一下实际工作场景中如何去优化算法模型和进行部署，另外为了方便大家进行模型训练，作者在文章中提…...
JavaScript类型判断：解密变量真实身份的神奇技巧
文章目录 1. typeof运算符2. instanceof运算符3. Object.prototype.toString4. Array.isArray5. 使用constructor属性6. 使用Symbol.toStringTag7. 使用is类型判断库8. 谨慎使用隐式类型转换结语 🎉JavaScript类型判断：解密变量真实身份的神奇技巧 ☆* o…...
MT6893_天玑 1200芯片规格参数介绍_datasheet规格书
天玑 1200(MT6893)是一款专为旗舰级全新5G芯片，它融合了先进的AI、相机和多媒体技术，为用户带来令人惊叹的体验。采用先进的6纳米制程设计，内置各种先进技术。该芯片采用旗舰级的八核CPU架构设计，支持16GB强大的四通道内存以及双通…...
obsidian博客联动方案
平台文章具有滞后性，最新文章请访问https://blog.nuoyis.net 原先博客需要使用typorapicgotypecho，其中typora编写完毕后需要复制到typecho后台去，极其不方便，然后经过高人指点，我对该软件交互使用开发了新高度 obsidi…...
Llama3-8B微调显存优化实战：在单张RTX 4090上如何用PEFT+TRL跑通SFT？
Llama3-8B微调显存优化实战：单卡RTX 4090的极限挑战 当Meta发布Llama3系列模型时，8B版本因其在消费级硬件上的潜在可行性迅速成为开发者社区的焦点。但将这样一个拥有80亿参数的模型塞进24GB显存的显卡，就像试图把一头大象装进冰箱——理论上…...
RK3588嵌入式主板如何以ARM架构重塑智能医疗设备设计
1. 项目概述：当医疗设备遇上“能效比”难题在医疗设备这个对稳定性和可靠性要求近乎苛刻的领域，硬件平台的每一次选择都像是一场精密的外科手术，需要权衡性能、功耗、尺寸、成本与长期供应。过去很长一段时间，当设备需要更强的算力…...
别再手动Cherry-pick了！用IDEA的Squash功能，3步合并Git提交历史
告别零碎Commit：IDEA交互式变基实战指南 在团队协作开发中，每个开发者都经历过这样的场景：为了修复一个看似简单的Bug，你在本地分支上提交了五六个"WIP"（Work in Progress）或"fix typo"…...
Kubernete
简介 Kubernetes（简称 K8s）是一个 开源的容器编排平台，用于自动化 部署、扩展、管理容器化应用 的工具。 假设你有很多个应用（比如用 Docker 打包的服务），Kubernetes 能帮你： ✅ 自动部署&#…...
论文AI率90%熬夜怎么办？2026年5招实测，一次过知网维普AIGC
2025 年 12 月 25 日知网 AIGC 检测系统升级，2026 年 4 月 27 日维普 AI 率检测平台升级…2026 毕业季，各大主流 AIGC 检测软件陆续升级系统，识别 AI 痕迹更加精准。 临近毕业，同学们看者飘红的 AIGC 检测报告、纷繁复杂的降 AI 系…...
Python EXE逆向工程完全指南：使用python-exe-unpacker快速反编译打包程序
Python EXE逆向工程完全指南：使用python-exe-unpacker快速反编译打包程序 【免费下载链接】python-exe-unpacker A helper script for unpacking and decompiling EXEs compiled from python code. 项目地址: https://gitcode.com/gh_mirrors/py/python-exe-unpa…...
LeetCode--112. 路径总和（二叉树）
题目描述 给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在 根节点到叶子节点 的路径，这条路径上所有节点值相加等于目标和 targetSum 。如果存在，返回 true ；否则，返回 false 。 叶子节点 是指没…...
AI Agent Runtime 正在成为新基础设施层
1. 这不是新赛道，而是 runtime 层的“操作系统时刻”正在重演你打开手机看到新闻标题《Anthropic Just Shipped the Layer That’s Already Going to Zero》，第一反应可能是：又一个大模型公司搞出了什么黑科技？但如果你真花十分钟…...
MoE稀疏激活原理与工程实践：解密大模型2%参数调用真相
1. 项目概述：参数规模与稀疏激活的真相拆解“GPT-4 Has 1.8 Trillion Parameters. It Uses 2% of Them Per Token.”——这句话过去两年在技术社区反复刷屏，常被当作“AI算力爆炸”的标志性论断。但作为从2016年就开始跑LSTM、2018年手写Transformer Enc…...