JavaScript怎么實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)驗(yàn)證碼

發(fā)布時(shí)間：2021-03-22 10:37:34 來(lái)源：億速云閱讀：267 作者：小新欄目：開(kāi)發(fā)技術(shù)

小編給大家分享一下JavaScript怎么實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)驗(yàn)證碼，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

效果圖：

實(shí)現(xiàn)思路：

把數(shù)字和字母放到一個(gè)數(shù)組中，通過(guò)隨機(jī)的方式取得數(shù)組下標(biāo)，總共取4個(gè)組成驗(yàn)證碼；
把驗(yàn)證碼渲染出來(lái)（一個(gè)一個(gè)的渲染）；
繪制一定數(shù)量的干擾線，隨機(jī)顏色；
輸入驗(yàn)證碼，輸入4位以后去驗(yàn)證，正確顯示鉤，錯(cuò)誤顯示叉并且刷新驗(yàn)證碼。

編寫(xiě)構(gòu)造函數(shù)

文本構(gòu)造函數(shù)

//文字的構(gòu)造函數(shù)
	function Text(o){
		this.x=0,//x坐標(biāo)
		this.y=0,//y坐標(biāo)
		this.text='',//內(nèi)容
		this.font=null;//字體
		this.textAlign=null;//對(duì)齊方式
		
		this.init(o);
	}
	
	Text.prototype.init=function(o){
		for(var key in o){
			this[key]=o[key];
		}
	}
	Text.prototype.render=function(context){
		this.ctx=context;
		innerRender(this);
			
		function innerRender(obj){
			var ctx=obj.ctx;
			ctx.save()
			ctx.beginPath();
			ctx.translate(obj.x,obj.y);
			
			if(obj.font){
				ctx.font=obj.font;
			}
			if(obj.textAlign){
				ctx.textAlign=obj.textAlign;
			}
			if(obj.fill){//是否填充
				obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;
				ctx.fillText(obj.text,0,0);
			}
		 	ctx.restore();
		}
	 	return this;
	}

線段構(gòu)造函數(shù)

 
	//直線的構(gòu)造
	function Line(ctx,o){
		this.x=0,//x坐標(biāo)
		this.y=0,//y坐標(biāo)
		this.startX=0,//開(kāi)始點(diǎn)x位置
		this.startY=0, //開(kāi)始點(diǎn)y位置
		this.endX=0,//結(jié)束點(diǎn)x位置
		this.endY=0;//結(jié)束點(diǎn)y位置
		this.thin=false;//設(shè)置變細(xì)系數(shù)
		this.ctx=ctx;
		
		this.init(o);
	}
	Line.prototype.init=function(o){
		for(var key in o){
			this[key]=o[key];
		}
	}
	Line.prototype.render=function(){
		innerRender(this);
		
		function innerRender(obj){
			var ctx=obj.ctx;
			ctx.save()
			ctx.beginPath();
			ctx.translate(obj.x,obj.y);
			if(obj.thin){
				ctx.translate(0.5,0.5);
			}
			if(obj.lineWidth){//設(shè)定線寬
				ctx.lineWidth=obj.lineWidth;
			}
			if(obj.strokeStyle){
				ctx.strokeStyle=obj.strokeStyle;
			}
			//劃線
		 	ctx.moveTo(obj.startX, obj.startY);
		 	ctx.lineTo(obj.endX, obj.endY);
		 	ctx.stroke();
		 	ctx.restore();
		}
	 	
	 	return this;
	}

按長(zhǎng)度獲取驗(yàn)證碼

	//根據(jù)指定長(zhǎng)度生成隨機(jī)字母數(shù)字
	Verifiable.prototype.randomWord=function(range){
	 var str = "",pos,
	   arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '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'];
	 for(var i=0; i<range; i++){
	  pos = Math.round(Math.random() * (arr.length-1));
	  str += arr[pos];
	 }
	 return str;
	}

繪制文字

	//繪制文字
	Verifiable.prototype.drawText=function(){
		var that=this;
		var count = 4;//文字個(gè)數(shù)
		var textW = 40;//文字所占寬
		var code=this.code = this.randomWord(count);
		var codeArr = code.split("");
		var text,x ;
		codeArr.forEach(function(c,i){
			x = that.w/count*i+textW/2;
			//繪制文字
			text = new Text({
				x:x,
				y:textW-10,
				text:c,
				font:'30px ans-serif',
				textAlign:'center',
				fill:true,
				fillStyle:'#412D6A'
			});
			that.renderArr.push(text);
		})		
	}

此時(shí)效果：

JavaScript怎么實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)驗(yàn)證碼

繪制干擾線

//繪制干擾線
	Verifiable.prototype.interfering=function(){
		var count = this.lineCount=20,line,ctx=this.ctx;
		var startX,
			startY,
			endX,
			endY,
			color;
			
		for(var i=0;i<count;i++){
			//隨機(jī)開(kāi)始坐標(biāo)，結(jié)束坐標(biāo)、顏色
			startX = _.getRandom(0,140);
			startY = _.getRandom(0,40);
			endX = _.getRandom(0,140);
			endY = _.getRandom(0,40);
			color = _.getRandomColor();
			//定義一條直線
			line = new Line(ctx,{
				x:0,
				y:0,
			 	startX:startX,
			 	startY:startY,
			 	endX:endX,
			 	endY:endY,
			 	strokeStyle:color
			})
			
			this.renderArr.push(line);
		}
	}

此時(shí)效果如下：

JavaScript怎么實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)驗(yàn)證碼

加入頁(yè)面布局

<!DOCTYPE html>
<html lang="zh">
 
<head>
  <meta charset="UTF-8">
  <title>verifiable</title>
  <style>
   #box{
		width:140px;
		height:40px;
		position:absolute;
		
	}
	#inputDiv{
		width:220px;
		position:absolute;
		margin:0 auto;
		left:0;
		top:30px;
		right:0;
		bottom:0;
	}
	#container{
		width:220px;
		height:60px;
		position:absolute;
		margin:0 auto;
		left:0;
		top:60px;
		right:0;
		bottom:0;
	}
	.refresh{
		position:absolute;
		left:140px;
	}
  </style>
</head>
 
<body>
	<div id='inputDiv'>
  	驗(yàn)證碼：<input size=10 id='codeInput'><img id='stateImg' ></img>
  </div>
  <div id="container">
  	<div id='box'></div>
  	<a href="javascript:void 0" class="refresh" onclick="refresh()">換一張</a>
  </div>
</body>
	<script type="text/javascript" src='verifiable.js'></script>
  <script type="text/javascript">
 	var box = document.getElementById('box');
 	var stateImg = document.getElementById('stateImg');
 	var codeInput = document.getElementById('codeInput');
 	
	verifiable.init(box,codeInput,stateImg);
	
	//換一張
	function refresh(){
		verifiable.renderArr.length=0;
		verifiable.draw();
	}
  </script>
</html>

加入輸入框事件

	//輸入框事件
	Verifiable.prototype.inputValid=function(input){
		var val = input.value;
		if(val.length<4) return ;
		
		if(this.code==val){
			console.log('suc');
			this.result(0);
		}else{
			this.result(1);
		}
	}

加入成功、失敗驗(yàn)證

//處理結(jié)果
	Verifiable.prototype.result=function(result){
		var codeInput = this.codeInput;
		var stateImg = this.stateImg;
		if(result==0){//成功
			stateImg.src="./images/suc.jpeg";
			codeInput.readOnly=true;
		}else {//失敗
			codeInput.readOnly=false;
			stateImg.src="./images/fail.jpeg";
			this.renderArr.length=0;
			this.draw();
		}
	}

完成

JavaScript怎么實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)驗(yàn)證碼

以上是“JavaScript怎么實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)驗(yàn)證碼”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

JavaScript怎么實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)驗(yàn)證碼

實(shí)現(xiàn)思路：

編寫(xiě)構(gòu)造函數(shù)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽