H5 canvas-验证码

2 篇文章 0 订阅
1 篇文章 0 订阅

H5 canvas-验证码

H5 canvas写的验证码插件,需引入jquery,可刷新,上图H5 canvas写的验证码插件,需引入jquery,可刷新,上图

HTML

<!DOCTYPE html>
<html>
<head>
	<title>VT Code</title>
	<link rel="stylesheet" type="text/css" href="VT Code.css">
</head>
<body>
<div class="wrapper">
	<div class="inputBox">
		<input type="text" name="" placeholder="请输入验证码">
		<span></span>
	</div>
	<p class="error"></p>
	<div class="canvasBox">
		<div class="imgBox">
			<canvas id="myCanvas" width=300 height=80></canvas>
		</div>
		<input type="button" class="refresh"></input>
	</div>
	<button class="submit">submit</button>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="VTCode.js"></script>
</body>
</html> 

CS

 *{
 	margin: 0;
 	padding: 0;
 }
 .wrapper{
 	margin: 30px;
 	width: 345px;
 	padding: 15px;
 	border:1px solid #ccc;
 	border-radius: 5px;
 }
 .inputBox{
 		position: relative;
 }
 .inputBox input{
 	display: inline-block;
 	width: 300px;
 	outline: none;	/*去边框蓝光*/
 	padding: 15px;
 	border-radius: 5px;
 	border:1px solid #ccc;
 	box-sizing: border-box;	/*怪异盒模型,改变padding不改变总体大小*/
 }
 .inputBox span{
 	position: absolute;
 	right: 0;
 	/* display: inline-block; */
 	width: 30px;
 	height: 23.5px;
 	background: url('./img/true.png');
 	background-size: 100%;
 	display: none;
 	top: 50%;
 	margin-top: -11.75px;
 }
 .error{
 	color: red; 
 	margin-top: 10px;
 	font-size: 12px;
 	display: none;
 }
 .canvasBox{
 	position: relative;
 	margin-top: 15px;
 	/* border:1px solid #000; */
 }
 .canvasBox .imgBox{
 	width:300px;
 	height: 80px;
 	border: 1px solid #ccc;
 	border-radius: 5px;
 }
 .canvasBox .refresh{
 	position: absolute;
 	right: 0px;
 	top: 50%;
 	display: inline-block;
 	width: 30px;
 	height: 30px;
 	background: url('./img/refersh.png');
 	background-size: 100%;
 	margin-top: -15px;
 	border: 0;
 	outline: none;	/*去边框蓝光*/
 	cursor: pointer;	/*小手*/
 }
 .submit{
 	padding: 10px 20px;
 	border: 0;
 	background-color: greenyellow;
 	color: #fff;
 	font-size: 18px;
 	margin-top: 15px;
 	border-radius: 5px;
 	cursor: pointer;	/*小手*/
 }

JS


//生成字符串库,0~9,a~Z
var arr=[];
	for(var i=48;i<123;i++){
		if((i>57&&i<65)||(i>90&&i<97)){
			continue;
		}
 		arr.push(String.fromCharCode(i));
	}
	var value;
//实例化,画布对象
function createCanvas(){
	value='';
	//选取验证码
	var canvasStr="";
	for(var i=0;i<6;i++){
		canvasStr+=arr[Math.floor(Math.random()*arr.length)]+" ";
	}
	//生成验证码图片
	var myCanvas=document.getElementById('myCanvas');	//画布
	var ctx=myCanvas.getContext('2d');	//画笔
	var oImg=new Image();
	oImg.src='./img/bj.png';
	oImg.onload = function(){	//oImg(验证码图片)加载完执行
		var pattern=ctx.createPattern(oImg,'repeat');
		ctx.fillStyle=pattern;	//填充范围,父级myCanvas
		ctx.fillRect(0,0,myCanvas.width,myCanvas.height);	//填充起始坐标x,y 结束坐标x,y
		ctx.textAlign = 'center';	//文本中心对齐
		ctx.fillStyle='#ccc';
		ctx.font ='46px Roboto Slab';
		ctx.setTransform(1,-0.12,0.3,1,0,12);		//设置倾斜,缩放....
		ctx.fillText(canvasStr,myCanvas.width/2,60);	//填充验证码,开始位置

	}
	value=canvasStr;
}
createCanvas();
$('.submit').on('click',function(){
	showResult();
})
$('.refresh').on('click',function(){
	createCanvas();	//刷新验证码
})
function showResult(){
	var inputValue=$('.inputBox input').val();
	console.log(value.toLowerCase().replace(/\s+/g,"")+"  "+inputValue.replace(/\s+/g,"").toLowerCase())
	if(value.toLowerCase().replace(/\s+/g,"")==inputValue.replace(/\s+/g,"").toLowerCase()){
		// $('.inputBox span').css({
		// 	background:"url('./img/true.png')",
		// 	display :'inline-block'
		// })
		$('.error').css(display,'inline-block').html('验证码输入正确!');
		createCanvas();	//刷新验证码
	}else{
		// $('.inputBox span').css({
		// 	background:'url("./img/false.png")',
		// 	display:'inline-block'
		// });
		$('.error').css(display,'inline-block').html('验证码输入错误,请重新输入!');
		createCanvas();	//刷新验证码
	}
	
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值