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

滑动验证码

news 2025/11/5 20:40:32

先上图

代码：

<!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>

相关文章：

滑动验证码

先上图 代码&#xff1a; <!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…...

编程日记 2023/12/2 3:07:52

数据爬取+可视化实战_告白气球_词云展示----酷狗音乐

一、前言 歌词上做文本分析&#xff0c;数据存储在网页上&#xff0c;需要爬取数据下来&#xff0c;词云展示在工作中也变得日益重要&#xff0c;接下来将数据爬虫与可视化结合起来&#xff0c;做个词云展示案例。 二、代码 # -*- coding:utf-8 -*- # 酷狗音乐 通过获取每首歌…...

编程日记 2023/12/2 3:05:50

rkmedia_vi_get_frame_test.c 代码解析

使用示例&#xff1a; 录像&#xff1a; rkmedia_vi_get_frame_test -a /etc/iqfiles/ -I 1 -o 1080.nv12 然后用yuvplayer.exe可以播放。 录像10帧&#xff1a; rkmedia_vi_get_frame_test -a /etc/iqfiles/ -I 1 -o 1080.nv12 -c 10 解析代码&#xff1a; #include <as…...

编程日记 2023/12/2 3:04:47

探究Kafka原理-3.生产者消费者API原理解析

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码、Kafka原理&#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44…...

编程日记 2023/12/2 3:00:41

Linux系统iptables扩展

目录 一. iptables规则保存 1. 导出规则保存 2. 自动重载规则 ①. 当前用户生效 ②. 全局生效 二. 自定义链 1. 新建自定义链 2. 重命名自定义链 3. 添加自定义链规则 4. 调用自定义链规则 5. 删除自定义链 三. NAT 1. SNAT 2. DNAT 3. 实验 ①. 实验要求 ②. …...

编程日记 2023/12/2 2:58:39

Openwrt 系统安装 插件名称与中文释义

系统镜像 当时是去官网找对应的&#xff0c;但是作为门外汉&#xff0c;想简单&#xff0c;可以试试这个网站 插件 OpenWrt/Lede全部插件列表功能注释...

编程日记 2023/12/2 2:57:38

[原创]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…...

编程日记 2023/12/2 2:55:34

C++(20)：bind_front

C(11)&#xff1a;bind_c11 bind_风静如云的博客-CSDN博客 提供了方法来绑定函数参数的方法。 C20提供了bind_front用于简化这个绑定。 #include <iostream> #include <functional> using namespace std;void func1(int d1, int d2) {cout<<__func__<&l…...

编程日记 2023/12/2 2:54:33

【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 代码…...

编程日记 2023/12/2 2:53:32

Centos7安装docker、java、python环境

文章目录 前言一、docker的安装二、docker-compose的安装三、安装python3和配置pip3配置python软链接&#xff08;关键&#xff09; 四、Centos 7.6操作系统安装JAVA环境 前言 每次vps安装docker都要看网上的文章&#xff0c;而且都非常坑&#xff0c;方法千奇百怪&#xff0c…...

编程日记 2023/12/2 2:51:30

简单小结类与对象

/*** Description 简单小结类与对象*/ package com.oop;import com.oop.demo03.Pet;public class Application {public static void main(String[] args) {/*1.类与对象类是一个模版&#xff1a;抽象&#xff0c;对象是一个具体的实例2.方法定义、调用&#xff01;3.对象的引用…...

编程日记 2023/12/2 2:49:29

ABAP 如何获取内表行的索引值(index) ?

获取索引值 在ABAP中&#xff0c;如果需要获取一个内表中某条记录的索引&#xff08;index&#xff09;&#xff0c;可以使用 READ TABLE 语句。在 READ TABLE 语句后面的 WITH KEY 子句可以指定搜索条件&#xff0c;如果找到了匹配的记录&#xff0c;系统字段 SY-TABIX 将保存…...

编程日记 2023/12/2 2:48:26

ESP32-Web-Server编程- 使用表格（Table）实时显示设备信息

ESP32-Web-Server编程- 使用表格&#xff08;Table&#xff09;实时显示设备信息 概述 上节讲述了通过 Server-Sent Events&#xff08;以下简称 SSE&#xff09; 实现在网页实时更新 ESP32 Web 服务器的传感器数据。 本节书接上会&#xff0c;继续使用 SSE 机制在网页实时显…...

编程日记 2023/12/2 2:47:25

vue3 Hooks函数使用及常用utils封装

hooks 是什么 vue3使用了composition API&#xff0c;我们可自定义封装hooks&#xff0c;达到复用&#xff0c;在Vue2中采取的mixins&#xff0c;对mixins而言&#xff0c; hooks更清楚复用功能代码的来源, 更清晰易懂。 简单来说&#xff1a;hooks 就是函数的一种写法&#xf…...

编程日记 2023/12/2 2:45:21

matlab 无迹卡尔曼滤波

1、内容简介 略 26-可以交流、咨询、答疑 2、内容说明 无迹卡尔曼滤波 无迹卡尔曼滤波 无迹卡尔曼滤波 3、仿真分析 %该文件用于编写无迹卡尔曼滤波算法及其测试 %注解&#xff1a;主要子程序包括&#xff1a;轨迹发生器、系统方程 % 测量方程、UKF滤波器 %----…...

编程日记 2023/12/2 2:43:16

大脑--学习方法

1.大脑喜欢色彩。平时使用高质量的有色笔或使用有色纸&#xff0c;颜色能帮助记忆。 2.大脑集中精力最多只有25分钟。这是对成人而言&#xff0c;所以学习20到30分钟后就应该休息10分钟。你可以利用这段时间做点家务&#xff0c;10分钟后再回来继续学习&#xff0c;效果会更好…...

编程日记 2023/12/2 2:42:15

4.C转python

1.建立函数: def 函数名(形参): 函数体(记得写缩进) return 返回值(python中可以没有return) 2.调用函数: 函数名(实参) 实参和形参个数相等即可,类型不需要相同 其中接收返回值与C中的差不多 3.如果只是定义而不调用则函数不会执行 4.先定义函数,后调用 5.python中可以…...

编程日记 2023/12/2 2:39:11

YOLOv5项目实战（5）— 算法模型优化和服务器部署

前言：Hello大家好，我是小哥谈。近期，作者所负责项目中的算法模型检测存在很多误报情况，为了减少这种误报情况，作者一直在不断优化算法模型。鉴于此，本节课就给大家详细介绍一下实际工作场景中如何去优化算法模型和进行部署，另外为了方便大家进行模型训练，作者在文章中提…...

编程日记 2023/12/2 2:35:07

JavaScript类型判断：解密变量真实身份的神奇技巧

文章目录 1. typeof运算符2. instanceof运算符3. Object.prototype.toString4. Array.isArray5. 使用constructor属性6. 使用Symbol.toStringTag7. 使用is类型判断库8. 谨慎使用隐式类型转换结语 &#x1f389;JavaScript类型判断&#xff1a;解密变量真实身份的神奇技巧 ☆* o…...

编程日记 2023/12/2 2:34:05

MT6893_天玑 1200芯片规格参数介绍_datasheet规格书

天玑 1200(MT6893)是一款专为旗舰级全新5G芯片&#xff0c;它融合了先进的AI、相机和多媒体技术&#xff0c;为用户带来令人惊叹的体验。采用先进的6纳米制程设计&#xff0c;内置各种先进技术。该芯片采用旗舰级的八核CPU架构设计&#xff0c;支持16GB强大的四通道内存以及双通…...

编程日记 2023/12/2 2:33:04

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2025/11/4 17:08:56

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/10/23 14:31:06

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/11/1 3:53:50

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/10/29 5:13:45

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/10/28 23:13:01

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/8/29 10:53:38

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/11/3 2:07:14

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2025/11/3 6:00:28