Jquery实现验证码功能 完美效果 jsp php 页面均可调用

举报
LexSaints 发表于 2021/06/11 09:41:44 2021/06/11
【摘要】 目录验证码实现效果如下:生成验证码的方法:生成验证码随机背景颜色在html中引用完整源码下载地址:验证码实现效果如下:​生成验证码的方法:function code_draw() { var canvas_width = $('#canvas').width(); var canvas_height = $('#canvas').height(); var canvas = document...

目录

验证码实现效果如下:

生成验证码的方法:

生成验证码随机背景颜色

在html中引用

完整源码下载地址:


验证码实现效果如下:

生成验证码的方法:

function code_draw() {
	var canvas_width = $('#canvas').width();
	var canvas_height = $('#canvas').height();
	var canvas = document.getElementById("canvas"); //获取到canvas的对象,演员
	var context = canvas.getContext("2d"); //获取到canvas画图的环境,演员表演的舞台
	canvas.width = canvas_width;
	canvas.height = canvas_height;
	var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0"; //取值范围
	var aCode = sCode.split(",");
	var aLength = aCode.length; //获取到数组的长度
	var value = [];
	for (var i = 0; i <= 3; i++) {
		var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
		var deg = Math.random() * 30 * Math.PI / 180; //产生0~30之间的随机弧度
		var txt = aCode[j]; //得到随机的一个内容
		value[i] = txt.toLowerCase();
		var x = 10 + i * 20; //文字在canvas上的x坐标
		var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
		context.font = "bold 23px 微软雅黑";

		context.translate(x, y);
		context.rotate(deg);

		context.fillStyle = code_randomColor();
		context.fillText(txt, 0, 0);

		context.rotate(-deg);
		context.translate(-x, -y);
	}
	// 将生成的值以属性的方法添加到元素
	value = value.join("");
	$('#canvas').attr('data-code', value)
	//验证码上显示线条
	for (var i = 0; i <= 5; i++) {
		context.strokeStyle = code_randomColor();
		context.beginPath();
		context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
		context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
		context.stroke();
	}
	//验证码上显示小点
	for (var i = 0; i <= 30; i++) {
		context.strokeStyle = code_randomColor();
		context.beginPath();
		var x = Math.random() * canvas_width;
		var y = Math.random() * canvas_height;
		context.moveTo(x, y);
		context.lineTo(x + 1, y + 1);
		context.stroke();
	}
}

生成验证码随机背景颜色

function code_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 + ")";
}

在html中引用

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQuery canvas验证码</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			html {
				width: 100%;
				height: 100%;
				font-size: 16px;
			}

			body {
				width: 100%;
				height: 100%;
				-moz-user-select: none;
				/*火狐*/
				/*禁止用户在页面选择文字*/
				-webkit-user-select: none;
				/*webkit浏览器*/
				-ms-user-select: none;
				/*IE10*/
				-khtml-user-select: none;
				/*早期浏览器*/
				user-select: none;
			}

			.code {
				padding-top: 50px;
				width: 400px;
				margin: 0 auto;
			}

			.input-val {
				width: 295px;
				background: #ffffff;
				height: 2.8rem;
				padding: 0 2%;
				border-radius: 5px;
				border: none;
				border: 1px solid rgba(0, 0, 0, .2);
				font-size: 1.0625rem;
			}

			#canvas {
				float: right;
				display: inline-block;
				border: 1px solid #ccc;
				border-radius: 5px;
				cursor: pointer;
			}

			.btn {
				width: 100px;
				height: 40px;
				background: #f1f1f1;
				border: 1px solid #ccc;
				border-radius: 5px;
				margin: 20px auto 0;
				display: block;
				font-size: 1.2rem;
				color: #e22e1c;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="code">
			<input type="text" value="" placeholder="验证码" class="input-val" />
			<canvas id="canvas" width="100" height="43"></canvas>
			<button class="btn">提交</button>
		</div>
	</body>

完整源码下载地址:

https://download.csdn.net/download/weixin_42350212/13778347

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200