前端实现图片验证码效果(数字和字母)
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;i2.使用
3.效果图
