随机倾斜,随机颜色的小验证码插件.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证码</title>
<style>
#check {
100px;
height: 20px;
}
#showResult{
height: 20px;
}
</style>
</head>
<body>
//输入框 失去光标触发事件判断
<input id="yours" type="text" onblur="judgeCheck()">
//验证码显示区域 点击刷新验证码
<div id="check" onclick="mycheck(this)">
</div>
//结果显示区 可以随心增添样式
<div id="showResult">
</div>
</body>
<script>
function mycheck(obj) {
//获取id
var id = obj.id;
//获取数量
var num = obj.num || 4;
//获取颜色
var color = obj.color;
var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "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", "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"];
//可以在css中添加需要要其他样式 开始拼串
//找到显示区
var node = document.getElementById(id);
var nodeStr = "";
for (var i = 0; i < num; i++) {
//随机数组索引
var randomIndex = parseInt(Math.random() * 100000) % (array.length);
//获取随机的度数 正负31度
var randomDeg = parseInt(Math.random() * 100000) % 62 - 31;
//获取pc端样式
var outStyle = window.getComputedStyle(node, null);
//计算每个的宽度
var perWidth = parseInt(outStyle.width) / num + "px";
//rgba(x,x,x,x) 红 绿 蓝 透明度 样式 用于随机颜色
var r = parseInt(Math.random() * 100000) % 255;
var g = parseInt(Math.random() * 100000) % 255;
var b = parseInt(Math.random() * 100000) % 255;
//不指定颜色默认随机 随机到背景色 别打我..
var c = color || "rgba(" + r + "," + g + "," + b + ",1)";
nodeStr += "<span class='randomIcon' style='display: inline-block;text-align: center" +
";color:" + c +
";transform:rotate(" + randomDeg + "deg)" +
";" + perWidth +
";" + "'>" +
array[randomIndex] + "</span>";
}
node.innerHTML = nodeStr;
}
function judgeCheck() {
//获取验证码值 转成大写
var icons = document.getElementsByClassName('randomIcon');
var iconVal = '';
for (var i=0;i<icons.length;i++) {
iconVal += icons[i].innerHTML;
}
iconVal = iconVal.toUpperCase();
//获取输入值 转成大写
var yours = document.getElementById('yours').value;
yours=yours.toUpperCase();
//判断
if (yours == iconVal) {
document.getElementById('showResult').innerHTML = "验证通过";
return true;
} else {
document.getElementById('showResult').innerHTML = "请输入正确验证码";
return false;
}
}
mycheck({
id: "check",//id
//默认随机 随机到背景色 别打我..
color: '',
//显示区域宽度 背景等请在样式中添加修改
})
</script>
</html>