用JS怎样写动态的验证码干扰效果?
发布时间：2022-01-03 02:16:10 所属栏目：语言 来源：互联网
导读：这篇文章给大家分享的是用JS实现动态的验证码干扰效果，有很多验证码干扰都做了这个效果，小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。 效果一 效果二 代码一 !doctype html html head m
|
这篇文章给大家分享的是用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() { // 清空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>  （编辑：拼字网 - 核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐