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 void(0)的妙用
Oct 21 Javascript
JQuery与iframe交互实现代码
Dec 24 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 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
第一节--面向对象编程
2006/11/16 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
Python中os.path用法分析
2015/01/15 Python
Python 正则表达式的高级用法
2016/12/04 Python
用python与文件进行交互的方法
2018/03/01 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
环保标语大全
2014/06/12 职场文书
股份合作协议书
2014/09/10 职场文书
会计求职自荐信
2015/03/26 职场文书
退货证明模板
2015/06/23 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏