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 onclick='createCode(4)' ></div></td> <td> <span onclick='createCode(4)'>看不清换一张</span></td> </tr> <tr> <td>验证码：</td> <td><input type='text' /></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 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() { // 清空canvas ctx.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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备