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

html+css+js随机验证码

news 2025/11/6 3:48:10

随机画入字符、线条  源代码在图片后面

点赞❤️+关注😍+收藏⭐️  互粉必回

图示

ec6bfd2cf73f424bb35056649a0bca69.jpg

 源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Captcha Verification</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }

        .captcha-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 400px;
        }

        .captcha-board {
            width: 100%;
            height: 150px;
            background: #eee;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
        }

        .captcha-input {
            width: 100%;
            height: 40px;
            margin-top: 20px;
            padding: 0 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .captcha-button {
            width: 100%;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="captcha-container">
        <div class="captcha-board" id="captchaBoard"></div>
        <input type="text" class="captcha-input" placeholder="Enter the captcha" id="captchaInput">
        <button class="captcha-button" οnclick="verifyCaptcha()">Verify</button>
    </div>

    <script>
        function generateCaptcha() {
            let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let captchaText = '';
            for (let i = 0; i < 4; i++) {
                captchaText += chars[Math.floor(Math.random() * chars.length)];
            }
            document.getElementById('captchaBoard').innerHTML = `<h1 style="font-size: 60px;">${captchaText}</h1>`;
            drawRandomLines();
            return captchaText;
        }

        function drawRandomLines() {
            let board = document.getElementById('captchaBoard');
            let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            svg.setAttribute("width", "100%");
            svg.setAttribute("height", "100%");
            svg.style.position = "absolute";
            svg.style.top = "0";
            svg.style.left = "0";

            for (let i = 0; i < 10; i++) {
                let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
                let color = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
                line.setAttribute("x1", Math.random() * 100 + "%");
                line.setAttribute("y1", Math.random() * 100 + "%");
                line.setAttribute("x2", Math.random() * 100 + "%");
                line.setAttribute("y2", Math.random() * 100 + "%");
                line.setAttribute("stroke", color);
                line.setAttribute("stroke-width", 1);
                svg.appendChild(line);
            }
            board.appendChild(svg);
        }

        let captcha = generateCaptcha();

        function verifyCaptcha() {
            let input = document.getElementById('captchaInput').value;
            if (input === captcha) {
                alert('Verification Passed!');
            } else {
                alert('Incorrect Captcha!');
            }
        }
    </script>
</body>
</html>

相关文章：

html+css+js随机验证码

随机画入字符、线条 源代码在图片后面 点赞❤️关注&#x1f60d;收藏⭐️ 互粉必回 图示 源代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"…...

编程日记 2024/7/12 6:54:26

WPS打开PDF文件的目录

WPS打开PDF文件的目录 其实WPS中PDF文件并没有像Word那样标准的目录&#xff0c;但是倒是有书签&#xff0c;和目录一个效果 点击左上角书签选项&#xff0c;或者使用Alt Shift 1快捷键即可...

编程日记 2024/7/12 6:52:23

常见 Web漏洞分析与防范研究

前言&#xff1a; 在当今数字化时代&#xff0c;Web应用程序扮演着重要的角色&#xff0c;为我们提供了各种在线服务和功能。然而&#xff0c;这些应用程序往往面临着各种潜在的安全威胁&#xff0c;这些威胁可能会导致敏感信息泄露、系统瘫痪以及其他不良后果。 SQL注入漏洞 …...

编程日记 2024/7/12 6:50:21

暗黑魅力：Xcode全面拥抱应用暗黑模式开发指南

暗黑魅力&#xff1a;Xcode全面拥抱应用暗黑模式开发指南 随着苹果在iOS 13和iPadOS 13中引入暗黑模式&#xff0c;用户可以根据自己的喜好或环境光线选择不同的界面主题。作为开发者&#xff0c;支持暗黑模式不仅能提升用户体验&#xff0c;还能彰显应用的专业性。Xcode提供了…...

编程日记 2024/7/12 6:49:20

【游戏引擎之路】登神长阶（七）——x86汇编学习：凡做难事，必有所得

5月20日-6月4日&#xff1a;攻克2D物理引擎。 6月4日-6月13日&#xff1a;攻克《3D数学基础》。 6月13日-6月20日&#xff1a;攻克《3D图形教程》。 6月21日-6月22日&#xff1a;攻克《Raycasting游戏教程》。 6月23日-7月1日&#xff1a;攻克《Windows游戏编程大师技巧》。 7月…...

编程日记 2024/7/12 6:48:19

在 Windows 平台搭建 MQTT 服务

引言 MQTT 是一种轻量级、基于发布/订阅模式的消息传输协议&#xff0c;旨在用极小的代码空间和网络带宽为物联网设备提供简单、可靠的消息传递服务。MQTT 经过多年的发展&#xff0c;如今已被广泛应用于资源开采、工业制造、移动通信、智能汽车等各行各业&#xff0c;使得 MQ…...

编程日记 2024/7/12 6:46:16

jdevelope安装

准备 1.jdk1.8&#xff08;已经安装不做记录&#xff09; 2.下载jdevelope安装包 3.安装包安装jdevelope开发工具 4.创建或导入项目 下载jdevelope安装包 官网下载地址&#xff1a;https://edelivery.oracle.com 安装包安装jdevelope开发工具 cmd管理员权限运行安装脚本…...

编程日记 2024/7/12 6:43:12

排序（一）——冒泡排序、直接插入排序、希尔排序（BubbleSOrt,InsertSort,ShellSort)

欢迎来到繁星的CSDN&#xff0c;本期的内容主要包括冒泡排序(BubbleSort&#xff09;&#xff0c;直接插入排序(InsertSort)&#xff0c;以及插入排序进阶版希尔排序&#xff08;ShellSort&#xff09;。 废话不多说&#xff0c;直接上正题&#xff01; 一、冒泡排序 冒泡排序…...

编程日记 2024/7/12 6:39:09

synchronized关键字详解（全面分析）

目录 synchronized关键字详解1、synchronized关键字简介2、synchronized作用和使用场景作用使用场景①、用在代码块上(类级别同步)②、用在代码块上(对象级别同步)③、用在普通方法上(对象级别同步)④、用在静态方法上(类级别同步)总结&#xff1a; 3、synchronized底层原理&am…...

编程日记 2024/7/12 6:35:05

数据建设实践之大数据平台(三)

安装hadoop 上传安装文件到/opt/software目录并解压 [bigdatanode101 software]$ tar -zxvf hadoop-3.3.5.tar.gz -C /opt/services/ 配置环境变量 [bigdatanode101 ~]$ sudo vim /etc/profile.d/bigdata_env.sh export JAVA_HOME/opt/services/jdk1.8.0_161 export ZK_HO…...

编程日记 2024/7/12 6:34:04

TypeScript中的交叉类型

交叉类型&#xff1a;将多个类型合并为一个类型&#xff0c;使用&符号连接。 type AProps { a: string }type BProps { b: number }type allProps AProps & BPropsconst Info: allProps {a: 小月月,b: 7} 我们可以看到交叉类型是结合两个属性的属性值&#xff0c;那…...

编程日记 2024/7/12 6:33:03

CNN -1 神经网络-概述2

CNN -1 神经网络-概述2 一：神经网络（operator）1> 线性层（Fully Connected Layer）2> 卷积层（Convolutional Layer）3> 池化层（Pooling Layer）4> 循环层（Recurrent Layer）5> 归一化层（Normalization Layer）6> 激活函数（Activation Function）7>…...

编程日记 2024/7/12 6:32:02

利用js实现图片压缩功能

图片压缩在众多应用场景中扮演着至关重要的角色&#xff0c;尤其是在客户端上传图片时。原始图片往往体积庞大&#xff0c;直接上传不仅消耗大量带宽资源&#xff0c;还可能导致上传速度缓慢&#xff0c;严重影响用户体验。因此&#xff0c;在图片上传至服务器前对其进行压缩处…...

编程日记 2024/7/12 6:31:01

2024.7.10 刷题总结

2024.7.10 **每日一题** 2970.统计移除递增子数组的数目 Ⅰ&#xff0c;这道题是一个考察双指针的题目&#xff0c;也考察了数组的基本性质。题目的意思是要统计有多少个子数组能满足移除后剩下的元素为严格递增的关系&#xff0c;刚开始没考虑到移除的元素要是连续的&#xff…...

编程日记 2024/7/12 6:30:00

ES6 async 函数详解 （十）

async 函数是什么&#xff1f;一句话&#xff0c;它就是 Generator 函数的语法糖。 const gen function* () {const f1 yield readFile(/etc/fstab);const f2 yield readFile(/etc/shells);console.log(f1.toString());console.log(f2.toString()); };const asyncReadFile …...

编程日记 2024/7/12 6:29:00

【安全设备】入侵检测

一、什么是入侵检测 入侵检测是一种网络安全技术&#xff0c;用于监测和识别对计算机系统或网络的恶意使用行为或未经授权的访问。入侵检测系统&#xff08;IDS&#xff09;是实现这一目标的技术手段&#xff0c;其主要目的是确保计算机系统的安全&#xff0c;通过及时发现并报…...

编程日记 2024/7/12 6:27:58

07浅谈大语言模型可调节参数tempreture

浅谈temperature 什么是temperature&#xff1f; temperature是大预言模型生成文本时常用的两个重要参数。它的作用体现在控制模型输出的确定性和多样性&#xff1a; 控制确定性&#xff1a; temperature参数可以控制模型生成文本的确定性&#xff0c;大部分模型中temperatur…...

编程日记 2024/7/12 6:26:57

Redis数据同步

文章简单介绍基于redis-shake的redis数据同步&#xff0c;该工具基于每个节点同步数据&#xff0c;即每个主节点需同步一次&#xff0c;才能完成整个redis集群的数据同步。 1、redis节点操作 ### 查看redis版本 ./bin/redis-server --version### 登录redis ./bin/redis-cli -…...

编程日记 2024/7/12 6:25:56

快手矩阵源码，快速拥有自己的短视频矩阵

在数字化浪潮席卷全球的今天&#xff0c;短视频已成为内容传播的新宠&#xff0c;而如何高效、精准地管理多平台、多账号&#xff0c;实现短视频内容的快速制作与发布&#xff0c;是每个自媒体人都在思考的问题。快手矩阵源码&#xff0c;作为一款集多平台管理、多账户管理、短…...

编程日记 2024/7/12 6:24:55

notes for datawhale 2th summer camp NLP task1

//I wrote this note in obsidian and copied it here. The strange format in this note is due to lack of obsidian plugins. tags: AI-studyML status: done 目标&#xff1a;跑通baseline&#xff0c;体验NLP模型解决问题的流程&#xff0c;基本了解赛题要求&#xff0c;…...

编程日记 2024/7/12 6:23:54

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/9/6 5:44:49

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/10/29 17:53:07

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2025/11/1 17:00:58

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/10/5 6:41:51

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/11/4 13:40:14

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/10/27 13:42:02

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/11/1 4:12:04

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2025/11/4 22:30:00