js实现验证码干扰（动态）

本文实例为大家分享了js实现验证码动态干扰的具体代码，供大家参考，具体内容如下

效果一

效果二

代码一

<!doctype html><html><head><meta charset=\"utf-8\"><title>js简单验证码使用</title><style>.code{font-family:Arial;font-style:italic;color:blue;font-size:30px;border:0;padding:2px 3px;letter-spacing:3px;font-weight:bolder;float:left;cursor:pointer;width:150px;height:50px;line-height:60px;text-align:center;vertical-align:middle;background-color:#D8B7E3;}span {text-decoration:none;font-size:12px;color:#288bc4;padding-left:10px;}span:hover {text-decoration:underline;cursor:pointer;}</style><script>//页面加载时，生成随机验证码window.onload=function(){createCode(4);}//生成验证码的方法function createCode(length) {var code = \"\";var codeLength = parseInt(length); //验证码的长度var checkCode = document.getElementById(\"checkCode\");所有候选组成验证码的字符，当然也可以用中文的var codeChars = 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\',\'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\');//循环组成验证码的字符串for (var i = 0; i < codeLength; i++){//获取随机验证码下标var charNum = Math.floor(Math.random() * 62);//组合成指定字符验证码code += codeChars[charNum];}if (checkCode){//为验证码区域添加样式名checkCode.className = \"code\";//将生成验证码赋值到显示区checkCode.innerHTML = code;}}//检查验证码是否正确function validateCode(){//获取显示区生成的验证码var checkCode = document.getElementById(\"checkCode\").innerHTML;//获取输入的验证码var inputCode = document.getElementById(\"inputCode\").value;console.log(checkCode);console.log(inputCode);if (inputCode.length <= 0){alert(\"请输入验证码！\");}else if (inputCode.toUpperCase() != checkCode.toUpperCase()){alert(\"验证码输入有误！\");createCode(4);}else{alert(\"验证码正确！\");}}</script></head><body><table border=\"0\" cellspacing=\"5\" cellpadding=\"5\" ><tr><td> <div id=\"checkCode\" class=\"code\" onclick=\"createCode(4)\" ></div></td><td> <span onclick=\"createCode(4)\">看不清换一张</span></td></tr><tr><td>验证码：</td><td><input type=\"text\" id=\"inputCode\" style=\"float:left;\" /></td></tr><tr><td></td><td><input type=\"button\" onclick=\"validateCode()\" value=\"确定\" /></td></tr></table></div></body></html>

代码二

<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"><title>canvas验证码</title></head><body><canvas width=\"200\" height=\"60\" id=\"check\" style=\"border:1px solid #000;\">您的浏览器不支持canvas标签！</canvas><script>var ctx = document.getElementById(\"check\").getContext(\"2d\");var ctxW = document.getElementById(\"check\").clientWidth;var ctxH = document.getElementById(\"check\").clientHeight;/*** 产生一个随机数 可设置随机数区间* @param {[Number]} min [随机数区间下限]* @param {[Number]} max [随机数区间上限]* @return {[Number]} [返回一个在此区间的随机数]*/function ranNum(min, max) {return Math.random() * (max - min) + min;}/*** 返回一个随机颜色 可设置颜色区间* @param {[Number]} min [颜色下限]* @param {[Number]} max [颜色上限]* @return {[String]} [随机颜色]*/function ranColor(min, max) {var r = ranNum(min, max);var g = ranNum(min, max);var b = ranNum(min, max);// return \"rgb(\" + r + \",\" + g + \",\" + b + \")\";return `rgb(${r},${g},${b})`;}/*** 随机字符串数组* @return {[Array]} [随机数组]*/function ranStr() {var str = \"QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789\";return str.split(\"\").sort(function () {return Math.random() - 0.5});}/*** 绘制文本字符串* @param {[String]} canvasId [canvas的id]* @param {[Number]} canvasW [canvas的width]* @param {[Number]} canvasH [canvas的height]* @param {[Number]} num [绘制验证码的字数]* @param {[Number]} fsMin [字体大小下限]* @param {[Number]} fsMax [字体大小上限]* @param {[Number]} frMin [字体旋转偏移下限]* @param {[Number]} frMax [字体旋转偏移上限]* @param {[Number]} min [颜色下限]* @param {[Number]} max [颜色上限]* @return {[String]} [随机字符串]*/function drawText(canvasId, canvasW, canvasH, num, fsMin, fsMax, frMin, frMax, min, max) {var str = \"\";for (var i = 0; i < num; i++) {var char = ranStr()[Math.floor(0, ranStr().length)];var fs = ranNum(fsMin, fsMax);canvasId.font = fs + \"px Verdana\";canvasId.fillStyle = ranColor(min, max);// 保存绘制的状态canvasId.save();// context.translate(x,y);// x 添加到水平坐标（x）上的值// y 添加到垂直坐标（y）上的值// 偏移canvasId.translate(canvasW / num * i + canvasW / 20, 0);// 变换角度canvasId.rotate(ranNum(frMin, frMax) * Math.PI / 180);// context.fillText(text,x,y,maxWidth);// text 规定在画布上输出的文本。// x 开始绘制文本的 x 坐标位置（相对于画布）。// y 开始绘制文本的 y 坐标位置（相对于画布）。// maxWidth 可选。允许的最大文本宽度，以像素计。canvasId.fillText(char, 0, (canvasH + fs) / 2.5, canvasW / num);// 返回之前保存过的路径状态和属性ctx.restore();str += char;}// console.log(str);return str;}/*** 绘制背景* @param {[String]} canvasId [canvas的id]* @param {[Number]} canvasW [canvas的width]* @param {[Number]} canvasH [canvas的height]* @param {[Number]} min [下限]* @param {[Number]} max [上限]*/function drawBg(canvasId, canvasW, canvasH, min, max) {// 绘制canvas背景canvasId.fillStyle = ranColor(min, max);// 填充颜色canvasId.fillRect(0, 0, canvasW, canvasH);}/*** 绘制干扰 圆点* @param {[String]} canvasId [canvas的id]* @param {[Number]} canvasW [canvas的width]* @param {[Number]} canvasH [canvas的height]* @param {[Number]} num [绘制的数量]* @param {[Number]} r [圆点半径]* @param {[Number]} min [下限]* @param {[Number]} max [上线]*/function drawCircle(canvasId, canvasW, canvasH, num, r, min, max) {for (var i = 0; i < num; i++) {// 开始绘制 （拿起笔）canvasId.beginPath();// context.arc(x,y,r,sAngle,eAngle,counterclockwise); （绘制）// x 圆的中心的 x 坐标。// y 圆的中心的 y 坐标。// r 圆的半径。// sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。// eAngle 结束角，以弧度计。// counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。canvasId.arc(ranNum(0, canvasW), ranNum(0, canvasH), r, 0, 2 * Math.PI);// 填充颜色canvasId.fillStyle = ranColor(min, max);// 填充canvasId.fill();// 闭合绘制 （放开笔）canvasId.closePath();}}/*** 绘制干扰 线段* @param {[String]} canvasId [canvas的id]* @param {[Number]} canvasW [canvas的width]* @param {[Number]} canvasH [canvas的height]* @param {[Number]} num [绘制的数量]* @param {[Number]} min [下限]* @param {[Number]} max [上线]*/function drawLine(canvasId, canvasW, canvasH, num, min, max) {for (var i = 0; i < num; i++) {// 开始绘制 （拿起笔）canvasId.beginPath();// 绘制开始点canvasId.moveTo(ranNum(0, canvasW), ranNum(0, canvasH));// 绘制结束点canvasId.lineTo(ranNum(0, canvasW), ranNum(0, canvasH));canvasId.strokeStyle = ranColor(min, max);canvasId.stroke();canvasId.closePath();}}// 绘制验证码function drawCanvas() {// 清空canvasctx.clearRect(0, 0, 200, 60);// 绘制背景drawBg(ctx, ctxW, ctxH, 200, 255);// 绘制干扰圆点drawCircle(ctx, ctxW, ctxH, 20, 5, 200, 255);// 绘制干扰线段drawLine(ctx, ctxW, ctxH, 20, 0, 255);// 绘制验证码var str = drawText(ctx, ctxW, ctxH, 4, 10, 50, -30, 30, 0, 100);return str;}drawCanvas();document.getElementById(\'check\').onclick = drawCanvas;</script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章: