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>

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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

js实现验证码干扰(动态)

请登录后发表评论