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() {
     // 清空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>
    

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

• js实现验证码干扰（静态）
• JavaScript编写带旋转+线条干扰的验证码脚本实例

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！