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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
Element Input组件分析小结
Oct 11 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
vue中@change兼容问题详解
Oct 25 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程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
深入解析php中的foreach问题
2013/06/30 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
解决uWSGI的编码问题详解
2017/03/24 Python
python paramiko模块学习分享
2017/08/23 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
自我鉴定范文
2013/11/10 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python