JavaScript編寫帶旋轉(zhuǎn)+線條干擾的驗證碼腳本實例
更新時間：2016年05月30日 14:56:13 作者：lizhong
除了普通的可點擊更換的四位驗證碼實現(xiàn),我們這里還展示了更進一步的JavaScript編寫帶旋轉(zhuǎn)+線條干擾的驗證碼腳本實例,需要的朋友可以參考下
基礎(chǔ)版
從我們平時上網(wǎng)的經(jīng)驗來看,驗證碼一般是四位,由數(shù)字和字母組成。
那么接下來樓主將帶領(lǐng)大家一步步用JavaScript做出一個驗證碼腳本!
先給出成品，方便大家理解：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#securityCode{
background-color: #008000;
width:70px;
height:30px;
font-family: '楷體', serif;
font-size: 20px;
color:white;
}
</style>
<script language="JavaScript" type="text/javascript">
function createCode(){
var code=new Array(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');
var codeNumber;
securityCode="";//全局變量,方便后續(xù)驗證
for(var i=0;i<4;i++){
codeNumber=Math.floor(Math.random()*36);
securityCode+=code[codeNumber];
}
document.getElementById("securityCode").value=securityCode;
}
function verify(){
var enterCode=document.getElementById("enterCode").value;
if(enterCode.toUpperCase()==securityCode){
alert("輸入正確,通過驗證!");
}
else{
enterCode.value="";
createCode();
}
}
</script>
<title>Jizhen Tan</title>
</head>
<body onLoad="checkCookie()" >
<input type="text" id="enterCode"><br/>
<input type="button" id="securityCode" onclick="createCode()">
<a href="###" onclick="createCode()">看不清楚</a><br/>
<input type="button" style="background-color: #0099FF; font-size: 20px;"value="驗證" onclick="verify()">
</body>
</html>
1.既然是四位驗證碼,我們的思路就要打開一些了,首先我們需要一個數(shù)組來儲存字母和數(shù)字。
var code=new Array(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');
2.然后我們需要讓它隨機顯示數(shù)組中的元素，這里我們建立一個codeNumber變量來隨機顯示的數(shù)字,但我們需要的是四位驗證碼，而現(xiàn)在數(shù)組中的元素都是單個的，怎么辦呢？簡單！我們再建立一個securityCode變量來儲存數(shù)組中的元素不就得了。代碼如下：
var codeNumber;
securityCode="";//全局變量,方便后續(xù)驗證
for(var i=0;i<4;i++){
codeNumber=Math.floor(Math.random()*36);
securityCode+=code[codeNumber];
}
可以看出此時securityNumber變量儲存的就是一個四位隨機驗證碼
3.好了，經(jīng)過簡單的兩步，我們就得到了四位驗證碼。我們將它放在一個createCode函數(shù)中。
function createCode(){
var code=new Array(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');
var codeNumber;
securityCode="";//全局變量,方便后續(xù)驗證
for(var i=0;i<4;i++){
codeNumber=Math.floor(Math.random()*36);
securityCode+=code[codeNumber];
}
document.getElementById("securityCode").value=securityCode;
}
4.接下來我們創(chuàng)建一個驗證機制：
function verify(){
var enterCode=document.getElementById("enterCode").value;
if(enterCode.toUpperCase()==securityCode){
alert("輸入正確,通過驗證!");
}
else{
enterCode.value="";
createCode();
}
}
5.小小修飾下驗證碼：
<style>
#securityCode{
background-color: #008000;
width:70px;
height:30px;
font-family: '楷體', serif;
font-size: 20px;
color:white;
}
</style>
進階：進一步阻止機器人的高級技巧
接觸的大部分項目中，驗證碼一直都是后臺干的事，這兩天正好有一個頁面需要驗證碼，第時間想著后臺實現(xiàn)，但突然轉(zhuǎn)念一想大部分項目貌似對安全性要求不是很高，又要求有點阻止機器人的技巧，于是就用前端寫了一個驗證碼。并利用CSS3的transform屬性里的rotate設(shè)置旋轉(zhuǎn)，再隨機弄點干擾線，最后為了在所有DOM節(jié)點的上邊加一層opacity=0的DIV，一個前端驗證碼就出來了。
vCode代碼：
(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 = 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];
}
}
};
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 - 10) + "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);
用法：
//container 為 驗證碼的DOM節(jié)點 var code = new vCode(container); // 驗證是否正確 // inputCode為用戶輸入的驗證碼 code.verify(inputCode); // return true or false
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了關(guān)于js內(nèi)存泄露的一個好例子。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
Bootstrap 模態(tài)對話框只加載一次 remote 數(shù)據(jù)的完美解決辦法
前端框架 Bootstrap 的模態(tài)對話框，可以使用 remote 選項指定一個 URL，這樣對話框在第一次彈出的時候就會自動從這個地址加載數(shù)據(jù)到 .modal-body 中，但是它只會加載一次，不過通過在事件中調(diào)用 removeData() 方法可以解決這個問題，具體操作方法，大家通過本文了解下吧2017-07-07
在一個js文件中如果需要引入另外所依賴的js文件，可以在一個js文件中導(dǎo)入如下代碼即可2014-03-03
這篇文章主要介紹了JS匹配日期和時間的正則表達式,結(jié)合實例形式分析了JS匹配日期、時間及日期+時間等時間格式的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-05-05
javascript簡單進制轉(zhuǎn)換實現(xiàn)方法
這篇文章主要介紹了javascript簡單進制轉(zhuǎn)換實現(xiàn)方法,涉及javascript字符串轉(zhuǎn)換與數(shù)值操作相關(guān)技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了JS字典Dictionary類定義與用法,結(jié)合實例形式分析了javascript字典Dictionary的定義、添加、移除、統(tǒng)計等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
JScript面向事件驅(qū)動的編程...2007-01-01
js函數(shù)參數(shù)設(shè)置默認值的一種變通實現(xiàn)方法
js函數(shù)中有個儲存參數(shù)的數(shù)組arguments，因此js版支持參數(shù)默認值的函數(shù)可以通過另外一種變通的方法實現(xiàn)2014-05-05
本文給大家介紹使用BootStrap實現(xiàn)用戶登錄界面UI，布局風(fēng)格采用左右各一半的風(fēng)格設(shè)計，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-08-08
JS如何對Iframe內(nèi)外頁面進行操作總結(jié)
iframe標(biāo)簽是一個內(nèi)聯(lián)框架,即用來在當(dāng)前HTML頁面中嵌入另一個文檔的,且所有主流瀏覽器都支持iframe標(biāo)簽,這篇文章主要給大家介紹了關(guān)于JS如何對Iframe內(nèi)外頁面進行操作的相關(guān)資料,需要的朋友可以參考下2021-10-10