jquery实现图片验证码

2023-01-10 12:39:21

效果如图所示:
在这里插入图片描述

前提要下载jquery.min.js文件(百度搜索下载即可)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图形验证码</title>
		<style>
		  .input-val {
			  width: 200px;
			  height: 32px;
			  border: 1px solid #ddd;
			  box-sizing: border-box;
		  }
		  #canvas {
			  vertical-align: middle;
			  box-sizing: border-box;
			  border: 1px solid #ddd;
			  cursor: pointer;
		  }
		  .btn {
			  display: block;
			  margin-top: 20px;
			  height: 32px;
			  width: 100px;
			  font-size: 16px;
			  color: #fff;
			  background-color: #457adb;
			  border: none;
			  border-radius: 50px;
		  }
		</style>
		<!-- 将这里的jquery文件换成自己的地址即可 -->
		<script type="text/javascript" src="./jquery.min.js" ></script>
		<script>
			$(function(){
			  var show_num = [];
			  draw(show_num);
			  $("#canvas").on('click',function(){
			   draw(show_num);
			  })
			  $(".btn").on('click',function(){
			   var val = $(".input-val").val().toLowerCase();
			   var num = show_num.join("");
			   if(val==''){
			    alert('请输入验证码!');
			   }else if(val == num){
			    alert('提交成功!');
			    $(".input-val").val('');
			    // draw(show_num);
			   }else{
			    alert('验证码错误!请重新输入!');
			    $(".input-val").val('');
			    // draw(show_num);
			   }
			  })
			 })
			 //生成并渲染出验证码图形
			 function draw(show_num) {
			  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,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,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;//获取到数组的长度
			  for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数(如果想显示6位数,4改成6即可)
			   var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
			   // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
			   var deg = Math.random() - 0.5; //产生一个随机弧度
			   var txt = aCode[j];//得到随机的一个内容
			   show_num[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 = randomColor();
			   context.fillText(txt, 0, 0);
			   context.rotate(-deg);
			   context.translate(-x, -y);
			  }
			  for (var i = 0; i <= 5; i++) { //验证码上显示线条
			   context.strokeStyle = 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 = 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 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 + ")";
			 }
		</script>
	</head>
	<body>
		<div class="code">
		  <input type="text" value="" placeholder="请输入验证码(不区分大小写)" class="input-val">
		  <canvas id="canvas" width="100" height="30"></canvas>
		  <button class="btn">提交</button>
		</div>
	</body>
</html>

  • 作者:范范_
  • 原文链接:https://blog.csdn.net/qq_40853132/article/details/125605301
    更新时间:2023-01-10 12:39:21