随机倾斜,随机颜色的小验证码插件.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>验证码</title> <style> #check { width: 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)" + ";width:" + 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>
时间： 2024-10-09 11:15:14