前端实现图片验证码效果(数字和字母)

1.verification-code.js

;(function(){
var data = [];//验证码数据
function picVerificationCode(config){/*验证码:数字和字母组成@param config {Object} 配置参数@param config.container {DOM元素} 验证码显示容器 必填@param config.num {Number} 验证码个数 非必填@param config.iconum {Number} 背景斑点个数 非必填@param config.changeBtn {DOM元素数组} 点击刷新验证码 非必填@param config.strFontSize {Array} 验证码字符大小 非必填@param config.width {Number} 验证码显示容器宽度 非必填@param config.height {Number} 验证码显示容器高度 非必填@param config.background {String} 验证码显示容器背景颜色 非必填@param config.cimgRefresh {Boolean} 是否点击验证码图片后刷新验证码 非必填*///参数判断if(dataType(config)!='Object'){console.log('参数必须是object')return}if(!config.container||!isElement(config.container)){console.log('container参数必须是Dom元素')return;}//参数初始化(默认值)var defalutConfig = {num:4,iconum:10,width:160,height:40,background:'#ddd',fsize:[18,20,22,16],cimgRefresh:true}var config = Object.assign({},defalutConfig,config);//合并参数var verificationCode=[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','Q','W','E','R','T','Y','U','I','O','P','A','S','D','F','G','H','J','K','L','Z','X','C','V','B','N','M'];var tlist = [],//验证码字符数组color=[],//字符颜色rote=[],//字符旋转角度fsize=[];//字符字体大小config.container.innerHTML = '';//初始化验证码容器for(var i = 0;i<config.num;i++){var a = '';for(var j=0;j<3;j++){a+=randomNum(255).toString(16)}if(a.length == 4||a.length == 5){a = a.substr(0,3)}color.push('#'+a)if(config.fsize[i]){fsize.push(config.fsize[i]+'px')}else{fsize.push(config.fsize[randomNum(0,config.fsize.length-1)]+'px')   }tlist.push(verificationCode[randomNum(61)]);rote.push(randomNum(-45,45));}//设置验证码容器样式var box = config.containerbox.style.background = config.background;box.style.width = config.width+'px';box.style.height = config.height+'px';box.style.lineHeight = config.height+'px';box.style.display = 'inline-block';box.style.position = 'relative';box.style.textAlign = 'center';box.style.padding = 0;box.style.userSelect = 'none';var boxWidth = box.offsetWidth;var boxHeight = box.offsetHeight;var IconColor=[];//斑点颜色for(var m=0;m<config.iconum;m++){var threeColor = '';for(var j=0;j<3;j++){threeColor +=randomNum(255).toString(16)}if(threeColor.length == 4||threeColor.length == 5){threeColor = threeColor.substr(0,3)}IconColor.push('#'+threeColor)}for(var n=0;n<config.iconum;n++){var eltag = document.createElement("div");eltag.style.background = IconColor[n];eltag.style.position = 'absolute';eltag.style.width = '3px';eltag.style.height = '3px';eltag.style.borderRadius = '50%';eltag.style.top = randomNum(boxHeight-2)+'px';eltag.style.left = randomNum(boxWidth-2)+'px'box.appendChild(eltag)//添加斑点}for(var k=0;k<config.num;k++){//添加验证码字符var span = document.createElement("span");span.innerHTML=tlist[k];//内容span.style.color=color[k];//颜色span.style.fontSize=fsize[k];//字体大小span.style.display = 'inline-block';span.style.width = Math.floor((config.width/config.num))+'px';if(supportCss3('transform')){//浏览器如果支持css3 transform则设置span.style.transform='rotate('+rote[k]+'deg)';//旋转角度}box.appendChild(span)}//点击刷新验证码if(config.cimgRefresh){config.container.addEventListener('click',function(){picVerificationCode(Object.assign({},config,{cimgRefresh:false,changeBtn:null}))},true)}if(dataType(config.changeBtn)=='Array'){config.changeBtn.forEach(function(item,index){if(!isElement(item))return;item.addEventListener('click',function(){picVerificationCode(Object.assign({},config,{cimgRefresh:false,changeBtn:null}))},true)})}config.container.setAttribute('data-verificode',tlist)data = tlist;return tlist;
}
/******获取验证码数据******/
function getData(){return data
}
/******数组乱序******/
function shuffle(arr) {var length = arr.length,randomIndex,temp;while (length) {randomIndex = Math.floor(Math.random() * (length--));temp = arr[randomIndex];arr[randomIndex] = arr[length];arr[length] = temp}return arr;
}
/******判断浏览器是否支持某个css属性*******/
function supportCss3(style) {var prefix = ['webkit', 'Moz', 'ms', 'o'],i,humpString = [],htmlStyle = document.documentElement.style,_toHumb = function (string) {return string.replace(/-(\w)/g, function ($0, $1) {return $1.toUpperCase();});};for (i in prefix)humpString.push(_toHumb(prefix[i] + '-' + style));humpString.push(_toHumb(style));for (i in humpString)if (humpString[i] in htmlStyle) return true;return false;
}
/******判断js变量是否是DOM元素*******/
function isElement(OBJ){return HTMLElement?OBJ instanceof HTMLElement:(OBJ && typeof OBJ === 'object' &&(OBJ.nodeType === 1||OBJ.nodeType === 9) && typeof OBJ.nodeName === 'string')
}
/******判断数据类型*******/
function dataType(data){if(data === null) return 'Null';if(data === undefined) return 'Undefined';return Object.prototype.toString.call(data).slice(8,-1);}
/******获取[a,b]范围内的随机数******/
function randomNum(minNum,maxNum){ switch(arguments.length){ case 1: return parseInt(Math.random()*minNum+1,10); break; case 2: return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); break; default: return 0; break; }
}
window.verifiCode = {picVerificationCode:picVerificationCode,getData:getData,shuffle:shuffle,supportCss3:supportCss3,isElement:isElement,dataType:dataType,randomNum:randomNum}
})();

2.使用

<!DOCTYPE html>
<html>
<head><title></title><script src='./verification-code.js'></script>
</head>
<body><div id='picCode'></div><button id='refresh'>刷新验证码</button><button id='getCode'>获取验证码</button>
<script>
var ww = verifiCode.picVerificationCode({num:5,//验证码个数iconum:20,//背景斑点个数fsize:[18,20,22,16],container:document.getElementById('picCode'),changeBtn:[document.getElementById('refresh')]})
document.getElementById('getCode').addEventListener('click',function(){var data = verifiCode.getData()console.log(data)
},true)
</script>
</body>
</html>

3.效果图

前端实现图片验证码效果(数字和字母)相关推荐

图像 - 识别出图片里的数字和字母
本文给大家分享的是C#识别出图片里的数字和字母的代码,主要是识别以前公司的软件注册码截图里的数字和字母,功能很简单,也存在很大的局限性,这里仅仅是分享,小伙伴们参考下. 一个图片识别小工具,原先主要是 ...
php实现验证码（数字、字母、汉字）
验证码在表单实现越来越多了,但是用js的写的验证码,总觉得不方便,所以学习了下php实现的验证码.好吧,其实是没有事情干,但是又不想浪费时间,所以学习了下php实现验证码.正所谓,技多不压身.而且,也 ...
python随机生成验证码，数字+大小写字母
ASCII码的对照链接大写字母的十进制范围是(65,91) 小写字母的十进制范围是(97,123) 数字的十进制范围是(48,58) 思路: 1.先在空链表中添加大小写字母和数字 2.从列表中随机选 ...
前端将后端返回的数字(英文字母)，转成对应的文字进行显示
前言类似于省市区,状态,性别之类的可以枚举出来的变量,一般情况下数据库中存储的是其对应的value值,像省市区联动的话,前端界面中显示的是省市区的名字,但是接口的入参一般是对应的code码:如果界面 ...
随机验证码（数字和字母组成）及toLowerCase() 字符串转小写方法和toUpperCase（）字符串转大写方法...
JavaScript toLowerCase() 方法和toUpperCase()方法 toLowerCase()方法定义:toLowerCase() 方法用于把字符串转换为小写. 语法:var s ...
前端输入框限制只能输入数字和字母
const addressReg = /^[a-zA-Z0-9_]$/const address = valueif (!addressReg.test(address)) {this.formInl ...
随机数字图片验证码的原理、生成和破解
http://sxdt.h.baike.com/article-1307487.html 随机数字图片验证码的原理.生成和破解 2013-10-21 10:27:49 本文行家:jdsongss 随机 ...
python识别图片中数字_Python图像处理之图片验证码识别
在上一篇博客Python图像处理之图片文字识别(OCR)中我们介绍了在Python中如何利用Tesseract软件来识别图片中的英文与中文,本文将具体介绍如何在Python中利用Tesseract软件 ...
Django之头像实时展示到input框、图片验证码、简单发邮件
一.以注册功能来看头像实时展示首先先来写一个简单的页面: <div class="container-fluid"><div class="row&q ...

前端实现图片验证码效果(数字和字母)

前端实现图片验证码效果(数字和字母)相关推荐

最新文章

热门文章