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 相关文章推荐
javascript原型继承工作原理和实例详解
Apr 07 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
小程序清理本地缓存的方法
Aug 17 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
教你一步步实现一个简易promise
Nov 02 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 empty函数报错解决办法
2014/03/06 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
js实现常用排序算法
2016/08/09 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
python生成指定尺寸缩略图的示例
2014/05/07 Python
python中sets模块的用法实例
2014/09/30 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
Python实现多属性排序的方法
2018/12/05 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
护士求职推荐信范文
2013/11/23 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
上课不认真检讨书
2014/09/17 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
竞聘书的秘诀
2019/04/02 职场文书
A22国内电台短波广播频率表
2022/05/10 无线电
python如何读取和存储dict()与.json格式文件
2022/06/25 Python