/*====================来自网络=====================*/
图形验证码
验证码的功能一般是防止使用程序恶意注册、暴力破解或批量发帖而设置的。所谓验证码,就是将一串随机产生的数字或符号,生成一幅图片,图片里加上一些干扰像素(防止OCR),由用户肉眼识别其中的验证码信息,输入表单提交网站验证,验证成功后才能使用某项功能。
最常见的验证码主要有以下几种:
1、四位数字,随机的数字字符串,最原始的验证码,验证作用几乎为零。
2、随机数字图片验证码。图片上的字符比较中规中矩,有的可能加一些随机干扰素,还有一些是随机字符颜色,验证作用比上一个好。没有基本图形图像学知识的人,不可破
3、各种图片格式的随机数+随机大写英文字符+随机干扰像素+随机位置。
4、汉字是注册目前最新的验证码,随机生成,打起来更难了,影响用户体验,所以,一般应用的比较少。
对于识别验证码的程序来说,最难的部分是验证字符的切割和特征码的建立,而国内很多程序员制作验证码时,总是喜欢在验证码加很多干扰素,干扰线,影响效果不说,还达不到很好的效果;所以,要想使自己验证码难于被识别,只做下面两点就够了
1、字符粘连,最好所有的字符都有粘连的部分;
2、不要使用规格字符,验证码的各个部分使用不同比例的缩放或者旋转。
只要做到这两点,或者这两点的变形,识别程序就很难识别。
/*====================来自网络=====================*/
效果截图:
实现代码:
来自网络加上个人修改
实现页面:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="vCode.js"></script>
<script>
onload = function () {
var container2 = document.getElementById("vCode2");
var code2 = new vCode(container2, {
len: 4,
bgColor: "#444444",
colors: [
"#DDDDDD",
"#DDFF77",
"#77DDFF",
"#99BBFF",
//"#7700BB",
"#EEEE00"
]
});
document.getElementById("btn2").addEventListener("click", function () {
alert(code2.verify(document.getElementById("code2").value));
}, false);
};
</script>
<style>
*{margin:0;padding:0;}
.codeBox{height:40px;margin:100px auto;width:400px;position:relative;}
#code2{text-indent:10px;height:40px;line-height:40px;display:inline-block;position:relative;top:-15px;}
#btn2{width:100px;height:40px;line-height:40px;background:#5a935e;color:#fff;display:inline-block;text-align:center;border:1px solid #5a935e;position:relative;top:-15px;cursor:pointer;}
</style>
</head>
<body>
<div class="codeBox">
<input type="text" id="code2" placeholder="请输入验证码" value=""/>
<div id="vCode2" style="width:70px; height: 40px; border: 1px solid #ccc; display: inline-block;"></div>
<a id="btn2">验证</a>
</div>
</body>
</html>
方法封装js即vCode.js
(function(){
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);
};
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);
};
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 = 30;
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 = 4;
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];
}
}
};
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();
};
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)],
"position: absolute",
"left:" + randint(this.uW * index, this.uW * index + this.uW - 15) + "px",
"top:" + randint(0, this.h - 30) + "px",
"transform:rotate(" + randint(-30, 30) + "deg)",
"-ms-transform:rotate(" + randint(-30, 30) + "deg)",
"-moz-transform:rotate(" + randint(-30, 30) + "deg)",
"-webkit-transform:rotate(" + randint(-30, 30) + "deg)",
"-o-transform:rotate(" + randint(-30, 30) + "deg)",
"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;
};
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",
"top:" + randint(0, this.h) + "px",
"transform:rotate(" + randint(-30, 30) + "deg)",
"-ms-transform:rotate(" + randint(-30, 30) + "deg)",
"-moz-transform:rotate(" + randint(-30, 30) + "deg)",
"-webkit-transform:rotate(" + randint(-30, 30) + "deg)",
"-o-transform:rotate(" + randint(-30, 30) + "deg)",
"font-family:" + this.options.fonts[randint(0, this.options.fonts.length - 1)],
"font-weight:" + randint(400, 900)
].join(";");
this.dom.appendChild(dom);
this.lineDoms.push(dom);
}
};
this.vCode = vCode;
}).call(this);