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


Posted in Javascript onFebruary 23, 2021

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

效果一

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
js实现验证码干扰(静态)
Feb 22 #Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 #Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 #Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 #Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 #Javascript
k8s node节点重新加入master集群的实现
Feb 22 #Javascript
js实现简单图片拖拽效果
Feb 22 #Javascript
You might like
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
PHP文件操作实例总结
2016/09/27 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
javascript 函数速查表
2010/02/07 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
Python标准库内置函数complex介绍
2014/11/25 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
详解python中的lambda与sorted函数
2020/09/04 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
HTTP状态码详解
2021/03/18 杂记
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
住房公积金接收函
2014/01/09 职场文书
秋游活动策划方案
2014/02/16 职场文书
秋季运动会广播稿
2014/02/22 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
党风廉设责任书
2014/04/16 职场文书
2014年商场工作总结
2014/11/22 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android