服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - JavaScript实现页面动态验证码的实现示例

JavaScript实现页面动态验证码的实现示例

2022-02-20 17:33人生行者 js教程

这篇文章主要介绍了JavaScript实现页面动态验证码的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

引言:

现在很多在用户登陆或注册的时候为了防止程序攻击,加入了动态验证的技术,一般是让用户输入随即生成的验证码来实现。我自己写了一个没有跟后台交互的,就在前端验证,发出来给大家看看。

效果图:

JavaScript实现页面动态验证码的实现示例

 实现思路:

  • 把数字和字母放到一个数组中,通过随机的方式取得数组下标,总共取4个组成验证码;
  • 把验证码渲染出来(一个一个的渲染);
  • 绘制一定数量的干扰线,随机颜色;
  • 输入验证码,输入4位以后去验证,正确显示钩,错误显示叉并且刷新验证码。

编写构造函数

文本构造函数

//文字的构造函数
	function Text(o){
		this.x=0,//x坐标
		this.y=0,//y坐标
		this.text="",//内容
		this.font=null;//字体
		this.textAlign=null;//对齐方式
		
		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;
	}

线段构造函数

 
	//直线的构造
	function Line(ctx,o){
		this.x=0,//x坐标
		this.y=0,//y坐标
		this.startX=0,//开始点x位置
		this.startY=0, //开始点y位置
		this.endX=0,//结束点x位置
		this.endY=0;//结束点y位置
		this.thin=false;//设置变细系数
		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){//设定线宽
				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;
	}

按长度获取验证码

	//根据指定长度生成随机字母数字
	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;//文字个数
		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);
		})		
	}

此时效果:

JavaScript实现页面动态验证码的实现示例

绘制干扰线

//绘制干扰线
	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++){
			//随机开始坐标,结束坐标、颜色
			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);
		}
	}

此时效果如下:

JavaScript实现页面动态验证码的实现示例

加入页面布局

<!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">
  	验证码:<input size=10 id="codeInput"><img id="stateImg" style="vertical-align: middle;width:20px"></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);
		}
	}

加入成功、失败验证

//处理结果
	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实现页面动态验证码的实现示例

 代码下载

到此这篇关于JavaScript实现页面动态验证码的实现示例的文章就介绍到这了,更多相关JavaScript 动态验证码内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://blog.csdn.net/dkm123456/article/details/114990229

延伸 · 阅读

精彩推荐
  • js教程JS中循环遍历数组的四种方式总结

    JS中循环遍历数组的四种方式总结

    这篇文章主要给大家总结介绍了关于JS中循环遍历数组的四种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,...

    前端小混混5492022-01-06
  • js教程微信小程序全局状态的深入讲解

    微信小程序全局状态的深入讲解

    这篇文章主要介绍了微信小程序全局状态的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们...

    明月依旧9442022-02-17
  • js教程js利用cookie实现记住用户页面操作

    js利用cookie实现记住用户页面操作

    这篇文章主要给大家介绍了关于js利用cookie实现记住用户页面操作的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考...

    一起随缘4232022-02-17
  • js教程基于 Next.js 的 SSR/SSG 方案了解一下?

    基于 Next.js 的 SSR/SSG 方案了解一下?

    服务端渲染(SSR,Server Side Render)与客户端渲染(CSR,Client Side Render)的核心区分点简单来说就是完整的 HTML 文档在服务端还是浏览器里组装完成。...

    DYBOY4812021-12-27
  • js教程three.js如何实现3D动态文字效果

    three.js如何实现3D动态文字效果

    这篇文章主要给大家介绍了关于three.js如何实现3D动态文字效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习...

    alphardex9982022-01-25
  • js教程JavaScript数据结构之双向链表

    JavaScript数据结构之双向链表

    这篇文章主要为大家详细介绍了JavaScript数据结构之双向链表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    希魔王的塔罗牌7872022-02-13
  • js教程JavaScript 数组遍历的五种方法

    JavaScript 数组遍历的五种方法

    这篇文章主要介绍了JavaScript 数组遍历的五种方法,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下...

    拾阶求上4042022-02-15
  • js教程JavaScript实现点击切换验证码及校验

    JavaScript实现点击切换验证码及校验

    这篇文章主要为大家详细介绍了JavaScript实现点击切换验证码及校验,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    栋栋很优秀啊3842021-12-29