JS生成登录验证码

采用js生成登录的验证码

采用的技术点有html,css,JS,jQuery

HTML:

<div class="box_b">
			<img src="./img/0775639c-c82c-4a29-937f-d2a3bae5151a.png" alt="">
			<div class="register">
				<h1>登录</h1>
				<div class="register_r">
					<span>账号:</span>
					<input type="text" placeholder="请输入您的账号">
				</div>
				<div class="register_r">
					<span>密码:</span>
					<input type="password" placeholder="请输入您的密码" >
				</div>
				<div class="register_e">
					<span>验证码:</span>
					<input type="text" placeholder="请输入验证码验证">
					<canvas id="c1" width="100" height="35" style="border:1px solid black"></canvas>
				</div>
				<div class="register_g">
					<input type="checkbox">
					<span>记住账号密码</span>
				</div>
				<button class="register_i">登录</button>
			</div>
		</div>

css:

.box_b {
	width: 100%;
	height: 450px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: space-around;
}

.box_b img {
	width: 500px;
	height: 550px;
}

.register {
	width: 480px;
	height: 400px;
	background-color: #E0E0EF;
	margin-top: 50px;
}


.register h1 {
	text-align: center;
	line-height: 80px;
}

.register span {
	font-size: 20px;
}

.register_r {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	line-height: 60px;
	text-align: center;
	align-items: center;
}

.register_r input {
	width: 300px;
	height: 35px;
	outline: none;
	padding-left: 10px;
	border: none;
}

.register_e {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	line-height: 60px;
	text-align: center;
	align-items: center;
}

.register_e input {
	width: 140px;
	height: 35px;
	outline: none;
	padding-left: 10px;
	border: none;
	margin-right: 30px;
}

.register_g {
	display: flex;
	align-items: center;
	margin-left: 40px;
}

.register_g input {
	width: 20px;
	height: 20px;
	margin-right: 7px;

}

.register_i {
	background-color: #298DFB;
	width: 84%;
	line-height: 50px;
	color: #fff;
	margin-top: 5%;
	border-radius: 5px;
	text-align: center;
	margin-left: 8%;
	border: 1px #E4E7ED ridge;
	font-size: 20px;
	cursor: pointer;
}

#c1 {
	vertical-align: middle;
	box-sizing: border-box;
	cursor: pointer;
	margin-right: 10px;
}

JS:

$(function() {
	// 存放随机的验证码
	var showNum = []

	draw(showNum)

	$("#c1").click(function() {
		draw(showNum)
	})
	$(".register_i").click(function() {
		var s = $("#inputValue").val().toLowerCase()
		var s1 = showNum.join("")
		if (s == s1) {
			alert("提交成功")
		} else {
			alert("验证码错误")
		}
		draw(showNum)
	})


	// 封装一个把随机验证码放在画布上
	function draw(showNum) {
		// 获取canvas
		var canvas = $("#c1")
		var ctx = canvas[0].getContext("2d")
		// 获取画布的宽高
		var canvas_width = canvas.width()
		var canvas_height = canvas.height()
		//  清空之前绘制的内容
		// 0,0清空的起始坐标
		// 矩形的宽高
		ctx.clearRect(0, 0, canvas_width, canvas_height)
		// 开始绘制
		var scode =
			"a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9,"
		var arrCode = scode.split(",")
		var arrLength = arrCode.length
		for (var i = 0; i < 4; i++) {
			var index = Math.floor(Math.random() * arrCode.length)
			var txt = arrCode[index] //随机一个字符
			showNum[i] = txt.toLowerCase() //转化为小写存入验证码数组
			// 开始控制字符的绘制位置
			var x = 10 + 20 * i //每一个验证码绘制的起始点x坐标
			var y = 20 + Math.random() * 8 // 起始点y坐标

			ctx.font = "bold 20px 微软雅黑"
			// 开始旋转字符
			var deg = Math.random * -0.5
			// canvas 要实现绘制内容具有倾斜的效果,必须先平移,目的是把旋转点移动到绘制内容的地方
			ctx.translate(x, y)
			ctx.rotate(deg)
			// 设置绘制的随机颜色
			ctx.fillStyle = randomColor()
			ctx.fillText(txt, 0, 0)

			// 把canvas复原
			ctx.rotate(-deg)
			ctx.translate(-x, -y)

		}
		for (var i = 0; i < 30; i++) {
			if (i < 5) {
				// 绘制线
				ctx.strokeStyle = randomColor()
				ctx.beginPath()
				ctx.moveTo(Math.random() * canvas_width, Math.random() * canvas_height)
				ctx.lineTo(Math.random() * canvas_width, Math.random() * canvas_height)
				ctx.stroke()
			}
			// 绘制点
			ctx.strokeStyle = randomColor()
			ctx.beginPath()
			var x = Math.random() * canvas_width
			var y = Math.random() * canvas_height
			ctx.moveTo(x, y)
			ctx.lineTo(x + 1, y + 1)
			ctx.stroke()
		}
	}

	// 随机颜色
	function randomColor() {
		var r = Math.floor(Math.random() * 256)
		var g = Math.floor(Math.random() * 256)
		var b = Math.floor(Math.random() * 256)
		return `rgb(${r},${g},${b})`
	}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/157635.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++面试宝典第2题:逆序输出整数

题目 写一个方法&#xff0c;将一个整数逆序打印输出到控制台。注意&#xff1a;当输入的数字含有结尾的0时&#xff0c;输出不应带有前导的0。比如&#xff1a;123的逆序输出为321&#xff0c;8600的逆序输出为68&#xff0c;-609的逆序输出为-906。 解析 这道题本身并没有什么…

03_W5500TCP_Client

上一节我们完成了W5500网络的初始化过程&#xff0c;这节我们进行TCP通信&#xff0c;w5500作为TCP客户端与电脑端的TCP_Server进行通信。 目录 1.TCP通信流程图&#xff1a; tcp的三次握手&#xff1a; tcp四次挥手&#xff1a; 2.代码分析&#xff1a; 1.TCP通信流程图&am…

视频的关键知识

1 引言 视频技术发展到现在已经有100多年的历史&#xff0c;虽然比照相技术历史时间短&#xff0c;但在过去很长一段时间之内都是最重要的媒体。 由于互联网在新世纪的崛起&#xff0c;使得传统的媒体技术有了更好的发展平台&#xff0c;应运而生了新的多媒体技术。而多媒体技…

STM32使用SIM900A、SIM800C、SIM800A完成短信发送、连接onenet上传数据、拨打电话_完整教程

一、前言 本篇文章介绍SIM800C 、SIM800A、SIM900A 等等系列的模块的常用AT指令,讲解模块的使用方法,演示短信发送、拨打电话、网络连接,与服务器通信等常用案例。 如果只是用到发送短信、拨打电话、连接网络通信、这些模块的AT指令是兼容的。 文章最后贴了完整的STM32代码…

go写文件后出现大量NUL字符问题记录

目录 背景 看看修改前 修改后 原因 背景 写文件完成后发现&#xff1a; size明显也和正常的不相等。 看看修改前 buf : make([]byte, 64) buffer : bytes.NewBuffer(buf)// ...其它逻辑使得buffer有值// 打开即将要写入的文件&#xff0c;不存在则创建 f, err : os.Open…

家用小型洗衣机哪款性价比高?内衣洗衣机品牌推荐

近日&#xff0c;国内著名的电子商务平台公布了“内衣洗衣机产业趋势”的研究报告。该报告指出&#xff0c;由于消费者对生活质量的要求越来越高&#xff0c;内衣洗衣机的行业也有了长足的发展&#xff0c;特别是在今年以来&#xff0c;内衣洗衣机的销售额同比上涨了830%&#…

ESP32 freeRTOS笔记 参数传递、任务优先级

一、四种参数传递方式 1.1 整数传递 使用 (void *) 任何类型传递参数&#xff0c;通过地址传递给任务。 #include <stdio.h> #include "sdkconfig.h" #include "freertos/FreeRTOS.h" #include "freertos/task.h"void myTask(void *pvP…

【每日一题】从二叉搜索树到更大和树

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;中序遍历的反序方法二&#xff1a;后缀数组 写在最后 Tag 【中序遍历】【二叉树】【2023-12-04】 题目来源 1038. 从二叉搜索树到更大和树 题目解读 在二叉搜索树中&#xff0c;将每一个节点的值替换成树中大于等于该…

仅 CSS 阅读进度条

为了构建一个阅读进度条&#xff0c;即显示用户向下滚动时阅读文章的进度&#xff0c;很难不考虑 JavaScript。但是&#xff0c;事实证明&#xff0c;您也可以使用纯 CSS 构建阅读进度条。 从本质上讲&#xff0c;一个名为 animation-timeline 的新实验性 CSS 属性可以让你指定…

【23-24 秋学期】NNDL 作业12 优化算法2D可视化

简要介绍图中的优化算法&#xff0c;编程实现并2D可视化 1. 被优化函数 2. 被优化函数 3. 解释不同轨迹的形成原因 分析各个算法的优缺点 REF&#xff1a;图灵社区-图书 (ituring.com.cn) 深度学习入门&#xff1a;基于Python的理论与实现 NNDL 作业11&#xff1a;优化算…

【蓝桥杯软件赛 零基础备赛20周】第5周——高精度大数运算与队列

文章目录 1. 数组的应用–高精度大数运算1.1 Java和Python计算大数1.2 C/C高精度计算大数1.2.1 高精度加法1.2.2 高精度减法 2. 队列2.1 手写队列2.1.1 C/C手写队列2.1.2 Java手写队列2.1.3 Python手写队列 2.2 C STL队列queue2.3 Java队列Queue2.4 Python队列Queue和deque2.5 …

HostHunter虚拟主机发现

HostHunter虚拟主机发现 1.HostHunter2.安装3.参数解释4.实例1.HostHunter HostHunter 一种工具,用于有效发现和提取提供大量目标 IPv4 或 IPv6 地址的主机名。HostHunter 利用简单的 OSINT 和主动协调技术将 IP 目标与虚拟主机名进行映射。这对于发现组织的真正攻击面特别有…

12、pytest上下文友好的输出

官方实例 # content of test_assert2.py import pytestdef test_set_comparison():set1 set("1308")set2 set("8035")assert set1 set2def test_dict_comparison():dict_1 {name:陈畅,sex:男}dict_2 {name:赵宁,sex:女}assert dict_1 dict_2def tes…

YoloV5改进策略:Swift Parameter-free Attention,无参注意力机制,超分模型的完美迁移

摘要 https://arxiv.org/pdf/2311.12770.pdf https://github.com/hongyuanyu/SPAN SPAN是一种超分网络模型。SPAN模型通过使用参数自由的注意力机制来提高SISR的性能。这种注意力机制能够增强重要信息并减少冗余,从而在图像超分辨率过程中提高图像质量。 具体来说,SPAN模…

VSCode Vue 开发环境配置

Vue是前端开发中的重要工具与框架&#xff0c;可以保住开发者高效构建用户界面。 Vue2官方文档&#xff1a;https://v2.cn.vuejs.org/ Vue3官方文档&#xff1a;https://cn.vuejs.org/ Vue的安装和引用 Vue2的官方安装指南&#xff1a;https://v2.cn.vuejs.org/v2/guide/ins…

clip-path,css裁剪函数

https://www.cnblogs.com/dzyany/p/13985939.html clip-path - CSS&#xff1a;层叠样式表 | MDN 我们看下这个例子 polygon里有四个值分别代表这四个点相对于原图左上方的偏移量。 裁剪个五角星

C语言碎片知识

sizeof 1.sizeof是C语言中的一个操作符&#xff0c;同时也是关键字&#xff01;&#xff01;&#xff01;&#xff01; 2.sizeof的操作数可以是类型&#xff0c;变量或表达式 如图&#xff0c;第一个为什么是6&#xff1f;&#xff0c;因为先计算了3的大小&#xff0c;占4个字…

陀螺仪LSM6DSV16X与AI集成(2)----姿态解算

陀螺仪LSM6DSV16X与AI集成.2--姿态解算 概述视频教学样品申请完整代码下载欧拉角万向节死锁四元数法姿态解算双环PI控制器偏航角陀螺仪解析代码上位机通讯加速度演示陀螺仪工作方式主程序演示 概述 LSM6DSV16X包含三轴陀螺仪与三轴加速度计。 姿态有多种数学表示方式&#xff…

数据结构-栈和队列

文章目录 栈什么是栈栈的操作栈的特点栈的实现栈的时间复杂度栈的应用 队列队列的概念队列的操作队列的实现队列的时间复杂度 栈 什么是栈 堆栈又名栈&#xff08;stack&#xff09;&#xff0c;它是一种运算受限的线性表。限定仅在表尾进行插入和删除操作的线性表。 栈的操作…

一键式紧急报警柱系统

随着科技的不断发展&#xff0c;一键式紧急报警柱在我们的生活和工作中扮演着越来越重要的角色。在这篇文章中&#xff0c;我们将一起探究与一键式紧急报警柱有关的知识。 一键式紧急报警柱是一种常见的安全防护设备&#xff0c;能够在紧急情况下快速发出警报&#xff0c;保护…
最新文章