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

jquery实现文字点选验证码

article 2025/10/8 2:57:29

文字点选验证码是一种有效的防止自动化攻击的手段。用户需要按照提示顺序点击特定的文字，验证通过后才能进行下一步操作。本文将详细介绍如何使用jQuery实现这种验证码。

一、实现思路
  1. 生成验证码：随机生成一组文字，并随机排列在验证码区域中。
  2. 用户交互：用户按照提示顺序点击文字。
  3. 验证点击顺序：检测用户点击的文字顺序是否正确。
  4. 反馈结果：根据点击结果给出反馈，成功则允许下一步操作，失败则重新生成验证码。
二、前端代码
1. HTML结构

首先，创建一个简单的HTML结构，包括验证码显示区域和提示信息。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字点选验证码</title><link rel="stylesheet" href="styles.css">
</head>
<body><div id="captcha-container"><div id="captcha-instructions"></div><div id="captcha"></div><button id="submit-button">提交</button><div id="feedback"></div></div><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="script.js"></script>
</body>
</html>
​
2. CSS样式

使用CSS来美化验证码的显示。

/* styles.css */
#captcha-container {text-align: center;margin-top: 50px;
}#captcha {display: flex;flex-wrap: wrap;justify-content: center;margin: 20px 0;
}.captcha-char {font-size: 24px;margin: 10px;cursor: pointer;user-select: none;padding: 5px 10px;border: 1px solid #ccc;border-radius: 4px;
}.captcha-char.selected {background-color: #ddd;
}#feedback {margin-top: 20px;font-size: 18px;color: red;
}
​
3. jQuery脚本

编写jQuery脚本，实现验证码的生成、点击和验证逻辑。

// script.js
$(document).ready(function() {var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';var captchaChars = [];var selectedChars = [];var correctOrder = [];function generateCaptcha() {$('#captcha').empty();captchaChars = [];selectedChars = [];correctOrder = [];for (var i = 0; i < 6; i++) {var char = chars.charAt(Math.floor(Math.random() * chars.length));captchaChars.push(char);}correctOrder = captchaChars.slice();correctOrder.sort(() => Math.random() - 0.5);$('#captcha-instructions').text('请按以下顺序点击: ' + correctOrder.join(' '));for (var i = 0; i < captchaChars.length; i++) {$('#captcha').append('<div class="captcha-char" data-char="' + captchaChars[i] + '">' + captchaChars[i] + '</div>');}}function checkSelection() {if (selectedChars.length === correctOrder.length) {if (selectedChars.join('') === correctOrder.join('')) {$('#feedback').text('验证通过').css('color', 'green');} else {$('#feedback').text('验证失败，请重试').css('color', 'red');generateCaptcha();}}}$('#captcha').on('click', '.captcha-char', function() {var char = $(this).data('char');if (!$(this).hasClass('selected')) {selectedChars.push(char);$(this).addClass('selected');}checkSelection();});$('#submit-button').on('click', function() {if (selectedChars.length !== correctOrder.length || selectedChars.join('') !== correctOrder.join('')) {$('#feedback').text('验证失败，请重试').css('color', 'red');generateCaptcha();} else {$('#feedback').text('验证通过').css('color', 'green');}});generateCaptcha();
});
​

详细步骤解析

  1. 生成验证码：

    • 随机选择字符组成验证码字符数组 captchaChars。
    • 将字符数组打乱顺序生成 correctOrder，并在提示信息中显示。

  2. 用户点击交互：

    • 监听验证码字符的点击事件。
    • 点击后将字符添加到用户选择的数组 selectedChars，并标记为已选中。

  3. 验证点击顺序：

    • 每次点击后检查 selectedChars的长度是否与 correctOrder相等。
    • 如果相等，比较两个数组是否一致。
    • 如果一致，显示验证通过信息；如果不一致，重置验证码并提示重新尝试。

  4. 提交按钮：

    • 点击提交按钮时，再次验证用户点击顺序是否正确。

相关文章：

jquery实现文字点选验证码

文字点选验证码是一种有效的防止自动化攻击的手段。用户需要按照提示顺序点击特定的文字&#xff0c;验证通过后才能进行下一步操作。本文将详细介绍如何使用jQuery实现这种验证码。 一、实现思路 生成验证码&#xff1a;随机生成一组文字&#xff0c;并随机排列在验证码区域…...

编程日记 2025/9/26 19:14:41

VTK|加载ply文件数据进行平移+高程渲染

文章目录 将 .ply 点云或模型数据进行 Elevation 着色并可视化渲染的完整流程&#x1f7e6; 1. **使用 ElevationFilter 给模型上色&#xff08;根据 Z 值&#xff09;**&#x1f7e9; 2. **构造 Jet 风格的 Lookup Table&#xff08;颜色映射表&#xff09;**&#x1f537; 3.…...

编程日记 2025/6/6 2:44:22

JAVA房屋租售管理系统房屋出租出售平台房屋销售房屋租赁房屋交易信息管理源码

一、源码描述 这是一套房屋租售管理源码&#xff0c;基于SpringBootVue框架&#xff0c;后端采用JAVA开发&#xff0c;源码功能完善&#xff0c;涵盖了房屋租赁、房屋销售、房屋交易等业务。 二、源码截图...

编程日记 2025/10/6 5:14:07

掌握Multi-Agent实践(三)：ReAct Agent集成Bing和Google搜索功能，采用推理与执行交替策略，增强处理复杂任务能力

一个普遍的现象是，大模型通常会根据给定的提示直接生成回复。对于一些简单的任务，大模型或许能够较好地应对。然而，当我们面对更加复杂的任务时，往往希望大模型能够表现得更加“智能”，具备适应多样场景和解决复杂问题的能力。为此，AgentScope 提供了内置的 ReAct 智能体…...

编程日记 2025/9/29 10:56:14

AOP实现原理

AOP实现原理 背景实现常用注解 背景 感觉需要掌握, 对理解其他知识点有好处. 实现 动态代理实现. JDK 实现 InvacationHander CGLib Enhancer 轻量级的基于ASM字节码框架. 常用注解 Before After AfterRetruning AfterThrowing Around...

编程日记 2025/8/19 19:02:48

Bearer Token的神秘面纱：深入解析HTTP认证头的设计哲学

为何有些Token会带Bearer&#xff1f; 在接口测试与开发中&#xff0c;我们经常会遇到这样的请求头&#xff1a; Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... 这个神秘的"Bearer"前缀从何而来&#xff1f;为何不直接使用Authorization: Token..…...

编程日记 2025/9/20 4:39:34

【国产化】在银河麒麟ARM环境下离线安装docker

1、前言 采用离线安装的方式。 关于离线安装的方式官网有介绍&#xff0c;但是说的很简单&#xff0c;网址&#xff1a;Binaries | Docker Docs 官网介绍的有几种主流linux系统的安装方式&#xff0c;但是没有kylin的&#xff0c;所以在此记录一下。 在安装过程中也遇到了些…...

编程日记 2025/10/2 2:18:53

K8S - Harbor 镜像仓库部署与 GitLab CI 集成实战

引言 在 Kubernetes 环境中&#xff0c;容器镜像的存储与管理至关重要。企业级镜像仓库&#xff08;如 Harbor&#xff09;为团队提供了安全、稳定、可扩展的镜像管理解决方案。 一、Harbor 安装与配置 Harbor 是由 VMware 开源的企业级云原生镜像仓库&#xff0c;它不仅支持…...

编程日记 2025/5/29 0:53:24

ASCII码的快速记忆方法

当然&#xff01;记住ASCII码的关键是找到规律和分组记忆。以下是一些快速记忆的方法&#xff1a; 1. 记住关键分界点 0~31&#xff1a;控制字符&#xff08;不可打印&#xff0c;如换行、制表符等&#xff09;&#xff0c;不需要全记&#xff0c;知道0是NULL&#xff0c;10是…...

编程日记 2025/8/19 12:50:02

java volatile关键字

volatile 是 Java 中用于保证多线程环境下变量可见性和禁止指令重排序的关键字。 普通变量不加volatile修饰有可见性问题&#xff0c;即有线程修改该变量值&#xff0c;其他线程无法立即感知该变量值修改了。代码&#xff1a; private static int intVal 0; // 普通变量未加 …...

编程日记 2025/9/25 1:55:12

解决SQL Server SQL语句性能问题（9）——正确使用索引

前述章节中，我们介绍和讲解了SQL调优所需要的基本知识和分析方法，那么，通过前述这些知识和方法定位到问题后，接下来，我们该怎么做呢？那就是本章的内容，给出解决SQL语句性能问题的、科学而合理的方案和方法。 本章主要对解决SQL语句性能问题的几种常用方法进行说明和讲解…...

编程日记 2025/8/10 14:10:35

Vibe Coding: 优点与缺点

如果你最近在开发圈子里，你很可能听说过这个新趋势"vibe coding"（氛围编程）。 我只能说我对此感受复杂。以下是原因。 优势 在构建新项目时，靠着氛围编程达到成功感觉很自由！但对于遗留代码来说情况就不同了，尽管也不是不可能。 实时反馈和快速迭代 Cursor（…...

编程日记 2025/10/6 16:22:00

技术分享 | 如何在2k0300（LoongArch架构）处理器上跑通qt开发流程

近期迅为售后团队反馈&#xff0c;许多用户咨询&#xff1a;2K0300处理器采用了LA264处理器核&#xff0c;若要在该处理器上运行Qt程序&#xff0c;由于架构发生了变化&#xff0c;其使用方法是否仍与ARM平台保持一致&#xff1f; 单纯回答‘一致’或‘不一致’缺乏说服力&…...

编程日记 2025/10/7 10:15:46

产品经理如何借助 DeepSeek 提升工作效能

在数字化时代的浪潮中&#xff0c;产品经理肩负着推动产品从概念到成功落地的重任&#xff0c;面临着复杂多变的市场环境、层出不穷的用户需求以及紧锣密鼓的项目周期。而 DeepSeek 这一先进的人工智能工具&#xff0c;宛如一把 “瑞士军刀”&#xff0c;为产品经理在各个工作环…...

编程日记 2025/7/30 22:52:59

基于卷积神经网络和Pyqt5的猫狗识别小程序

任务描述 猫狗分类任务&#xff08;Dogs vs Cats&#xff09;是Kaggle平台在2013年举办的一个经典计算机视觉竞赛。官方给出的Kaggle Dogs vs Cats 数据集中包括由12500张猫咪图片和12500张狗狗图片组成的训练集&#xff0c;12500张未标记照片组成的测试集。选手需要在规定时间…...

编程日记 2025/10/5 7:16:07

Hadoop 和 Spark 生态系统中的核心组件

以下是 Hadoop 和 Spark 生态系统的核心组件及其功能&#xff1a; Hadoop 生态核心组件 1. HDFS&#xff08;Hadoop 分布式文件系统&#xff09; - 命令/工具&#xff1a; hdfs 命令&#xff08;如 hdfs dfs -put 等&#xff09;。 - 作用&#xff1a;分布式存储海量数据&a…...

编程日记 2025/5/23 5:36:50

解锁健康养生新境界

在追求高品质生活的当下&#xff0c;健康养生早已超越 “治未病” 的传统认知&#xff0c;成为贯穿全生命周期的生活艺术。它如同精密的交响乐&#xff0c;需饮食、运动、心理与生活习惯多维度协奏&#xff0c;方能奏响生命的强音。 饮食养生讲究 “顺时、适性”。遵循二十四节…...

编程日记 2025/10/5 12:16:07

MQTT：轻量级物联网通信协议详解

引言 在物联网&#xff08;IoT&#xff09;迅速发展的今天&#xff0c;设备之间的高效通信变得至关重要。MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;作为一种轻量级的发布/订阅消息传输协议&#xff0c;因其低带宽、低延迟和易于实现的特性&#xff0c…...

编程日记 2025/7/6 11:52:23

C 语言逻辑运算符：组合判断，构建更复杂的条件

各类资料学习下载合集 ​​https://pan.quark.cn/s/8c91ccb5a474​​ 在 C 语言编程中，我们已经学习了如何使用比较运算符（如 ​​==​​​, ​​<​​​, ​​>​​）来判断两个值之间的关系，从而得到“真”或“假”的结果。但很多时候，我们需要根据多个条件的组合…...

编程日记 2025/7/9 12:20:53

基于OpenCV的人脸识别：EigenFaces算法

文章目录 引言一、概述二、代码解析1. 准备工作2. 加载训练图像3. 设置标签4. 准备测试图像5. 创建和训练识别器6. 进行预测7. 显示结果 三、代码要点总结 引言 人脸识别是计算机视觉领域的一个重要应用&#xff0c;今天我将通过一个实际案例来展示如何使用OpenCV中的EigenFac…...

编程日记 2025/10/2 17:47:33

【深度学习新浪潮】智能追焦技术全解析：从算法到设备应用

一、智能追焦技术概述 智能追焦是基于人工智能和自动化技术的对焦功能，通过深度学习算法识别并持续跟踪移动物体（如人、动物、运动器械等），实时调整焦距以保持主体清晰，显著提升动态场景拍摄成功率。其核心优势包括： 精准性：AI 算法优化复杂运动轨迹追踪（如不规则移动…...

编程日记 2025/10/7 3:04:59

网络研讨会开发注册中, 5月15日特励达力科，“了解以太网”

在线研讨会主题 Understanding Ethernet - from basics to testing & optimization 了解以太网 - 从基础知识到测试和优化 注册链接# https://register.gotowebinar.com/register/2823468241337063262 时间 北京时间 2025 年 5 月 15 日 星期四 下午 3:30 - 4:30 适宜…...

编程日记 2025/10/6 12:54:39

在 Spring Boot 中实现动态线程池的全面指南

动态线程池是一种线程池管理方案&#xff0c;允许在运行时根据业务需求动态调整线程池参数&#xff08;如核心线程数、最大线程数、队列容量等&#xff09;&#xff0c;以优化资源利用率和系统性能。在 Spring Boot 中&#xff0c;动态线程池可以通过 Java 的 ThreadPoolExecut…...

编程日记 2025/9/27 1:12:51

STL？vector！！！

一、前言 之前我们借助手撕string加深了类和对象相关知识&#xff0c;今天我们将一起手撕一个vector&#xff0c;继续深化类和对象、动态内存管理、模板的相关知识 二、vector相关的前置知识 1、什么是vector&#xff1f; vector是一个STL库中提供的类模板&#xff0c;它是存储…...

编程日记 2025/10/2 9:10:34

从黔西游船侧翻事件看极端天气预警的科技防线——疾风气象大模型如何实现精准防御？

近日，贵州省黔西市一起载人游船侧翻事故令人痛心。调查显示，事发时当地突遇强风暴雨，水面突发巨浪导致船只失控。这一事件再次凸显：在极端天气频发的时代，传统“经验式防灾”已不足够，唯有依靠智能化的气象预警技术，才能筑牢安全底线。 极端天气预警的痛点：为什么传统方…...

编程日记 2025/10/2 9:10:31

LDO与DCDC总结

目录 1. 工作原理 2. 性能对比 3. 选型关键因素 4. 典型应用 总结 1. 工作原理 LDO LDO通过线性调节方式实现降压&#xff0c;输入电压需略高于输出电压&#xff08;压差通常为0.2-2V&#xff09;&#xff0c;利用内部PMOS管或PNP三极管调整压差以稳定输出电压。其结构简单…...

编程日记 2025/8/22 21:39:42

FastChat部署大模型

一、前提条件 1、系统环境&#xff08;使用的 autodl 算力平台&#xff09; 2、安装相关库 安装 modescope pip3 install -U modelscope # 或使用下方命令 # pip3 install -U modelscope -i https://mirror.sjtu.edu.cn/pypi/web/simple安装 fastchat git clone https://gi…...

编程日记 2025/10/4 0:10:29

智汇云舟亮相第二十七届北京科博会

5月8日&#xff0c;备受瞩目的第二十七届中国北京国际科技产业博览会&#xff08;以下简称&#xff1a;北京科博会&#xff09;在国家会议中心盛大开幕。作为我国科技领域的重要盛会&#xff0c;北京科博会汇聚了众多前沿科技成果与创新力量&#xff0c;为全球科技产业交流搭建…...

编程日记 2025/10/3 7:48:02

Redis最新入门教程

文章目录 Redis最新入门教程1.安装Redis2.连接Redis3.Redis环境变量配置4.入门Redis4.1 Redis的数据结构4.2 Redis的Key4.3 Redis-String4.4 Redis-Hash4.5 Redis-List4.6 Redis-Set4.7 Redis-Zset 5.在Java中使用Redis6.缓存雪崩、击穿、穿透6.1 缓存雪崩6.2 缓冲击穿6.3 缓冲…...

编程日记 2025/9/22 14:35:48

北斗三号手持终端设备功能与应用

北斗三号卫星系统是我国自主建设、独立运行的全球卫星导航系统。通过多颗不同轨道卫星组成的&#xff0c;这些卫星持续向地球发射携带精确时间和位置信息的信号。地面上的北斗手持终端接收到至少四颗卫星信号后&#xff0c;利用信号传播时间差&#xff0c;通过三角函数等算法&a…...

编程日记 2025/10/4 5:31:39