分类导航

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了JavaScript编写带旋转+线条干扰的验证码脚本实例，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

基础版

从我们平时上网的经验来看,验证码一般是四位,由数字和字母组成。那么接下来楼主将带领大家一步步用JavaScript做出一个验证码脚本! 先给出成品，方便大家理解：

#securityCode{ BACkground-color: #008000; width:70px; height:30px; font-family: '楷体',serif; font-size: 20px; color:white; } @H_618_9@ Jizhen Tan
BACkground-color: #0099FF; font-size: 20px;"value="验证" onclick="verify()">

1.既然是四位验证码,我们的思路就要打开一些了,首先我们需要一个数组来储存字母和数字。

);

2.然后我们需要让它随机显示数组中的元素，这里我们建立一个codenumber变量来随机显示的数字,但我们需要的是四位验证码，而现在数组中的元素都是单个的，怎么办呢？简单！我们再建立一个securityCode变量来储存数组中的元素不就得了。代码如下：

number; securityCode="";//全局变量,方便后续验证 for(var i=0;i<4;i++){ codenumber=Math.floor(Math.random()*36); securityCode+=code[codenumber]; }

可以看出此时securitynumber变量储存的就是一个四位随机验证码 3.好了，经过简单的两步，我们就得到了四位验证码。我们将它放在一个createCode函数中。

{ var code=new Array(0,方便后续验证 for(var i=0;i<4;i++){ codenumber=Math.floor(Math.random()*36); securityCode+=code[codenumber]; } document.getElementById("securityCode").value=securityCode; }

4.接下来我们创建一个验证机制：

{ var enterCode=document.getElementById("enterCode").value; if(enterCode.toUpperCase()==securityCodE){ alert("输入正确,通过验证!"); } else{ enterCode.value=""; createCode(); } }

5.小小修饰下验证码：

#securityCode{ BACkground-color: #008000; width:70px; height:30px; font-family: '楷体',serif; font-size: 20px; color:white; } @H_618_9@

进阶：进一步阻止机器人的高级技巧

接触的大部分项目中，验证码一直都是后台干的事，这两天正好有一个页面需要验证码，第时间想着后台实现，但突然转念一想大部分项目貌似对安全性要求不是很高，又要求有点阻止机器人的技巧，于是就用前端写了一个验证码。并利用CSS3的transform属性里的rotate设置旋转，再随机弄点干扰线，最后为了在所有DOM节点的上边加一层opacity=0的DIV，一个前端验证码就出来了。

JavaScript编写带旋转+线条干扰的验证码脚本实例

vCode代码：

{ var randstr = function(length){ var key = {

  str : [
    'a','b','c','d','e','f','g','h','i','j','k','l','m','o','p','q','r','s','t','x','u','v','y','z','w','n','0','1','2','3','4','5','6','7','8','9'
  ],randint : function(n,m){
    var c = m-n+1;
    var num = Math.random() * c + n;
    return Math.floor(num);
  },randStr : function(){
    var _this = this;
    var leng = _this.str.length - 1;
    var randkey = _this.randint(0,leng);
    return _this.str[randkey];
  },create : function(len){
    var _this = this;
    var l = len || 10;
    var str = '';

    for(var i = 0 ; i<l ; i++){
      str += _this.randStr();
    }

    return str;
  }

};

length = length ? length : 10;

return key.create(length);@H_801_59@


};
var randint = function(n,m){

var c = m-n+1;

var num = Math.random() * c + n;

return Math.floor(num);

};
var vCode = function(dom,options){

this.codeDoms = [];

this.lineDoms = [];

this.initOptions(options);

this.dom = dom;

this.init();

this.addEvent();

this.update();

this.mask();

};
vCode.prototype.init = function(){

this.dom.style.position = "relative";

this.dom.style.overflow = "hidden";

this.dom.style.cursor = "pointer";

this.dom.title = "点击更换验证码";

this.dom.style.BACkground = this.options.bgColor;

this.w = this.dom.clientWidth;

this.h = this.dom.clientHeight;

thiS.UW = this.w / this.options.len;

};
vCode.prototype.mask = function(){

var dom = document.createElement("div");

dom.style.cssText = [

"width: 100%","height: 100%","left: 0","top: 0","position: absolute","cursor: pointer","z-index: 9999999"

].join(";");
dom.title = "点击更换验证码";

this.dom.appendChild(dom);@H_801_59@

};
vCode.prototype.addEvent = function(){

var _this = this;

_this.dom.addEventListener("click",function(){

_this.update.call(_this);

});

};
vCode.prototype.initOptions = function(options){
var f = function(){
  this.len = 4;
  this.fontSizeMin = 20;
  this.fontSizeMax = 48;
  this.colors = [
    "green","red","blue","#53da33","#AA0000","#FFBB00"
  ];
  this.bgColor = "#FFF";
  this.fonts = [
    "Times New Roman","Georgia","Serif","sans-serif","arial","tahoma","Hiragino Sans GB"
  ];
  this.lines = 8;
  this.lineColors = [
    "#888888","#FF7744","#888800","#008888"
  ];

  this.lineHeightMin = 1;
  this.lineHeightMax = 3;
  this.lineWidthMin = 1;
  this.lineWidthMax = 60;
};

this.options = new f();

if(typeof options === "object"){
  for(i in options){
    this.options[i] = options[i];
  }
}@H_801_59@

};
vCode.prototype.update = function(){

for(var i=0; i<this.codeDoms.length; i++){

this.dom.removeChild(this.codeDoms[i]);

}

for(var i=0; i<this.lineDoms.length; i++){

this.dom.removeChild(this.lineDoms[i]);

}

this.createCode();

this.draw();

};
vCode.prototype.createCode = function(){

this.code = randstr(this.options.len);

};
vCode.prototype.verify = function(codE){

return this.code === code;

};
vCode.prototype.draw = function(){

this.codeDoms = [];

for(var i=0; i<this.code.length; i++){

this.codeDoms.push(this.drawCode(this.code[i],i));

}
this.drawLines();@H_801_59@

};
vCode.prototype.drawCode = function(code,indeX){

var dom = document.createElement("span");
dom.style.cssText = [
  "font-size:" + randint(this.options.fontSizeMin,this.options.fontSizeMaX) + "px","color:" + this.options.colors[randint(0,this.options.colors.length - 1)],"left:" + randint(thiS.UW * index,thiS.UW * index + thiS.UW - 10) + "px","top:" + randint(0,this.h - 30) + "px","transform:rotate(" + randint(-30,30) + "deg)","-ms-transform:rotate(" + randint(-30,"-moz-transform:rotate(" + randint(-30,"-webkit-transform:rotate(" + randint(-30,"-o-transform:rotate(" + randint(-30,"font-family:" + this.options.fonts[randint(0,this.options.fonts.length - 1)],"font-weight:" + randint(400,900)
].join(";");

dom.innerHTML = code;
this.dom.appendChild(dom);

return dom;@H_801_59@

};
vCode.prototype.drawLines = function(){

this.lineDoms = [];

for(var i=0; i<this.options.lines; i++){

var dom = document.createElement("div");
  dom.style.cssText = [
    "position: absolute","opacity: " + randint(3,8) / 10,"width:" + randint(this.options.lineWidthMin,this.options.lineWidthMaX) + "px","height:" + randint(this.options.lineHeightMin,this.options.lineHeightMaX) + "px","BACkground: " + this.options.lineColors[randint(0,this.options.lineColors.length - 1)],"left:" + randint(0,this.w - 20) + "px",this.h) + "px",900)
  ].join(";");
  this.dom.appendChild(dom);

  this.lineDoms.push(dom);
}@H_801_59@

};
this.vCode = vCode;
}).call(this);


用法：
);
// 验证是否正确

// inputCode为用户输入的验证码

code.verify(inputCodE); // return true or false


       

大佬总结
       以上是大佬教程为你收集整理的JavaScript编写带旋转+线条干扰的验证码脚本实例全部内容，希望文章能够帮你解决JavaScript编写带旋转+线条干扰的验证码脚本实例所遇到的程序开发问题。
		如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
		本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。


			标签：验证码


	
		 
			
			   上一篇: JavaScript中的操作符类型转换示...
				下一篇:JavaScript常用判断写法大全(推荐...
		
	
    
    
       
	
    

	
		猜你在找的JavaScript相关文章
		 
						JavaScript实现页面5秒后自动跳转的方法
						2022-04-16
			

						JS获取前天、昨天、今天、明天、后天的时间
						2022-04-16
			

						推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
						2022-04-16
			

						JavaScript单位换算和数字格式化
						2019-10-09
			

						JavaScript 运行时错误: 无法获取未定义或 null 引用的属性，怎么办？
						2019-10-09
			

						如何使用Javascript获取元素的不透明度？
						2022-04-16
			

						JAVASCRIPT中URL 传递参数(特殊字符)解决方法及转码解码的介绍
						2019-10-09
			

						JavaScript中_proto_和prototype的区别
						2019-10-09
			

						【Javascript】【DOM操作】获取checkbox的checked属性
						2019-10-09
			

						如何理解JavaScript权威指南第96页的“也就是说，可以在声明一个JavaScipt函数之前调用...
						2019-10-09
			
	      
    
    
			其他相关热搜词更多
			phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap

 
	   
		
		
			
			
			
			
		

		
			最新JavaScript教程
			
							如何使用Javascript获取元素的不透明度？
							
				

							javascript – 如何扩展谷歌分析以跟踪AJAX等(根据H5BP文档)
							
				

							javascript – Webpack加载字体
							
				

							javascript – Angular2’this’未定义
							
				

							javascript – JQuery UI自动完成回调
							
				

							在javascript中使用和捕获RangeError
							
				

							在javascript中将军事时间转换为标准时间的最佳方法
							
				

							javascript – 从getElementsByTagName()获取属性的最佳方法？
							
				

							javascript – 如何在HTA的默认Web浏览器中打开链接？
							
				

							javascript – WebGL iOS渲染到浮点纹理
							
				
		
		
		
			热门JavaScript教程
			 
							Javascript, jQuery 各种height整理
							
				 

							JavaScript: 奇数在左，偶数在右
							
				 

							JavaScript中的位运算
							
				 

							JavaScript 运行时错误: 无法获取未定义或 null 引用的属性，怎么办？
							
				 

							javascript note
							
				 

							如何使用Javascript获取元素的不透明度？
							
				 

							javascript – 如何扩展谷歌分析以跟踪AJAX等(根据H5BP文档)
							
				 

							javascript – Webpack加载字体
							
				 

							javascript – Angular2’this’未定义
							
				 

							javascript – JQuery UI自动完成回调