引言:

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

效果图:

 实现思路:

  • 把数字和字母放到一个数组中,通过随机的方式取得数组下标,总共取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);
		})		
	}

此时效果:

绘制干扰线

//绘制干扰线
	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);
		}
	}

此时效果如下:

加入页面布局

<!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=".http://www.580doc.com/images/suc.jpeg";
			codeInput.readOnly=true;
		}else {//失败
			codeInput.readOnly=false;
			stateImg.src=".http://www.580doc.com/images/fail.jpeg";
			this.renderArr.length=0;
			this.draw();
		}
	}

完成

 代码下载

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

JavaScript实现页面动态验证码的实现示例的更多相关文章

  1. 原生javascript开发计算器实例

    计算器的主要作用是进行数字运算,开发一个计算器功能的web实例,有助于更好的掌握js基础的数字运算能力。本实例旨在帮......

  2. JS addEventListener()和attachEvent()方法实现注册事件

    在 JavaScript 的 DOM 事件模型中,通过调用对象的 addEventListener() 方法注册事件......

  3. javascript中call,apply,bind的区别详解

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢。在说区别之前还是先总结一下三者的相似之......

  4. js中this指向的问题与联系深入探究

    前言JavaScript 中最大的一个安全问题,也是最令人困惑的一个问题,就是在某些情况下this的值是如何确定的。......

  5. jquery表格插件Datatables使用、快速上手

    Datatables使用一、简介官网:https://datatables.net/ 中文官网:http://dat......

  6. 通过js正则表达式实例学习正则表达式基本语法

    正则表达式对于初学者来说是一个比较难理解的知识点,本文主要以实例来讲解正则表达式应该怎么样使用,希望对读者有所帮助正......

  7. javascript脚本何时会被执行

    javascript脚本可以嵌入在html内的任意地方,但它何时被调用呢?当浏览器打开HTML文件后,会直接运行不是......

  8. js简单粗暴的发布订阅示例代码

    什么是发布/订阅?我打个比方,你去某个门店买衣服,你和门店店长相互并不认识,门店店长只管卖他的衣服,并不关心是谁来买......

  9. JavaScript中的Proxy对象

    Js中Proxy对象Proxy对象用于定义基本操作的自定义行为,例如属性查找、赋值、枚举、函数调用等。语法const......

  10. ES6在工作中会用到的核心知识点讲解

    一、var, let, const谈到ES6,估计大家首先肯定会想到var,let,const咱就先谈谈这三者的区别......

随机推荐

  1. C/C++内存对齐详解

    1、什么是内存对齐 还是用一个例子带出这个问题,看下面的小程序,理论上,32位系统下,int占4byte,c......

  2. Android 中 WebView 的基本用法详解

    加载 URL (网络或者本地 assets 文件夹下的 html 文件)加载 html 代码Native 和 Jav......

  3. C# Twain协议调用扫描仪,设置多图像输出模式(Multi image output)

    Twain随着扫描仪、数码相机和其他图像采集设备的引入,用户热切地发现了将图像整合到他们的文档和其他工作中的价值。然......

  4. Java序列化

    1.什么是序列化Java序列化是指把Java对象转换为字节序列的过程,而Java反序列化是指把字节序列恢复为Java......

  5. 如何在C#中使用MSMQ

    MSMQ (Microsoft消息队列)是Windows中默认可用的消息队列。作为跨计算机系统发送和接收消息的可靠方......

  6. MySQL修改字符集的实战教程

    前言:在 MySQL 中,系统支持诸多字符集,不同字符集之间也略有区别。目前最常用的字符集应该是 utf8 和 ut......

  7. Java8 Stream

    简单认识Java stream Java8出了一个stream流式编程,在开发中或多或少用到接触过。怎么说呢!举个例......

  8. pixi.js 自定义光标样式

    pixi 介绍Pixi是一个超快的2D渲染引擎,通过Javascript和Html技术创建动画或管理交互式图像,从而......

  9. php结合GD库实现中文验证码的简单方法

    前言上一次写了一个常见的验证码,现在玩一下中文的验证码,顺便升级一下写的代码流程基本差不多先看GD库开启了没生成中文......

  10. python实现excel公式格式化的示例代码

    之前跟一些小伙伴有个讨论:大概就是很多跟数据打交道的朋友都面对过很复杂的excel公式,有时嵌套层数特别多,肉眼观看......