今日目标

1:和工作日报相同的是 完成验证码的制作和验证!


今日成果

1:验证码完整代码

var getGVerify = function (id){function GVerify(options) { //创建一个图形验证码对象,接收options对象为参数this.options = { //默认options参数值id: "", //容器IdcanvasId: "verifyCanvas", //canvas的IDwidth: "100", //默认canvas宽度height: "30", //默认canvas高度type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母code: ""}if(Object.prototype.toString.call(options) == "[object Object]"){//判断传入参数类型for(var i in options) { //根据传入的参数,修改默认参数值this.options[i] = options[i];}}else{console.log(options);console.log(Object.prototype.toString.call(options));this.options.id = options;}this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");this.options.letterArr = getAllLetter();this._init();this.refresh();}GVerify.prototype = {/**版本号**/version: '1.0.0',/**初始化方法**/_init: function() {var con = document.getElementById(this.options.id);var canvas = document.createElement("canvas");/*this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";*/canvas.id = this.options.canvasId;canvas.width = this.options.width;canvas.height = this.options.height;canvas.style.cursor = "pointer";canvas.innerHTML = "您的浏览器版本不支持canvas";con.appendChild(canvas);var parent = this;canvas.onclick = function(){parent.refresh();}},/**生成验证码**/refresh: function() {this.options.code = '';var canvas = document.getElementById(this.options.canvasId);if(canvas.getContext) {var ctx = canvas.getContext('2d');}ctx.textBaseline = "middle";ctx.fillStyle = randomColor(180, 240);ctx.fillRect(0, 0, this.options.width, this.options.height);if(this.options.type == "blend") { //判断验证码类型var txtArr = this.options.numArr.concat(this.options.letterArr);} else if(this.options.type == "number") {var txtArr = this.options.numArr;} else {var txtArr = this.options.letterArr;}for(var i = 1; i <= 4; i++) {var txt = txtArr[randomNum(0, txtArr.length)];this.options.code += txt;ctx.font = '20px SimHei';//ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; //随机生成字体大小ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色/* ctx.shadowOffsetX = randomNum(-3, 3);ctx.shadowOffsetY = randomNum(-3, 3);*/ctx.shadowBlur = randomNum(-3, 3);ctx.shadowColor = "rgba(0, 0, 0, 0.3)";var x = this.options.width / 5 * i;var y = this.options.height / 2;var deg = randomNum(-30, 30);/**设置旋转角度和坐标原点**/ctx.translate(x, y);ctx.rotate(deg * Math.PI / 180);ctx.fillText(txt, 0, 0);/**恢复旋转角度和坐标原点**/ctx.rotate(-deg * Math.PI / 180);ctx.translate(-x, -y);}/**绘制干扰线**/for(var i = 0; i < 4; i++) {ctx.strokeStyle = randomColor(40, 180);ctx.beginPath();ctx.moveTo(randomNum(0, this.options.width/2), randomNum(0, this.options.height/2));ctx.lineTo(randomNum(0, this.options.width/2), randomNum(0, this.options.height));
          ctx.stroke();}/**绘制干扰点**/for(var i = 0; i < this.options.width/4; i++) {ctx.fillStyle = randomColor(0, 255);ctx.beginPath();ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);ctx.fill();}},/**验证验证码**/validate: function(code){var verifyCode = code.toLowerCase();var v_code = this.options.code.toLowerCase();if(verifyCode == v_code){return true;}else{return false;}}}/**生成字母数组**/function getAllLetter() {var letterStr = "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";return letterStr.split(",");}/**生成一个随机数**/function randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min);}/**生成一个随机色**/function randomColor(min, max) {var r = randomNum(min, max);var g = randomNum(min, max);var b = randomNum(min, max);return "rgb(" + r + "," + g + "," + b + ")";}return new GVerify(id);}

调用方法

var verifyCode = new GVerify(id);

验证方法

if(verifyCode.validate(inputCode)){return true;
}esle{return false;
}

转载于:https://www.cnblogs.com/cndotabestdota/p/7144549.html

学习日报 7-10(验证码)相关推荐

  1. 学习日报 1028 分支结构 if分支语句

    学习日报 1028 分支结构 if分支语句 https://cloud.189.cn/t/FBzQbeRnYFbi java包 包的基本使用 java包的基本使用_pyhui的技术博客-CSDN博客 ...

  2. 学习日报 day03 实体与标识符 变量与数据类型

    学习日报 day03 实体与标识符 变量与数据类型 https://cloud.189.cn/t/ryIZF3Rfqy2q 常见问题 导入外部java文件 如何把java源文件放入到myeclipse ...

  3. 爬虫学习_selenium自动填写验证码

    爬虫学习_自动填写验证码 介绍一哈 项目 第一步 打开网站 第二步 获取验证码图片 第二步 获取验证码图片 第三步 识别验证码 结束 完整代码 介绍一哈 最近在跟着静觅大神.............. ...

  4. 【图片验证码识别】使用深度学习来 识别captcha 验证码

    谷歌图形验证码在AI 面前已经形同虚设,所以谷歌宣布退出验证码服务,这是为什么呢? 以下文章也许可以解释原因 本文会通过 Keras 搭建一个深度卷积神经网络来识别 captcha 验证码,建议使用显 ...

  5. 使用深度学习来识别 captcha 验证码

    谷歌图形验证码在AI 面前已经形同虚设,所以谷歌宣布退出验证码服务,这是为什么呢? 以下文章也许可以解释原因 本文会通过 Keras 搭建一个深度卷积神经网络来识别 captcha 验证码,建议使用显 ...

  6. 免费学习编程的10个好工具

    互联网时代的快速发展,很多人都在学习编程技术,小编今天为大家推荐的就是学习编程技术会用到的一些编程工具,免费学习编程的10个好工具!希望能够帮助到正在学习的小伙伴们. 免费学习编程的10个好工具: 1 ...

  7. 2019学习Python的10个原因

    如果你经常关注我,那你可能想知道为什么我要写一篇文章来告诉你们学习Python?但是几年前我曾向你们说过Java比Python更具有优势,哦,这就尴尬了,但确实,这几年情况有所改变,在2016年,Py ...

  8. 学习新技术的10个建议

    学习新技术的10个建议 作者: Pavan Podila  来源: 伯乐在线  发布时间: 2013-07-21 12:09  阅读: 3050 次  推荐: 44   原文链接   [收藏]   英 ...

  9. C# 学习笔记(10)加速球

    C# 学习笔记(10)加速球 利用窗体透明和GIF透明背景,实现加速球类似效果(QQ宠物,老年人大概也知道) 本文参考C#仿PS异形启动界面设计https://www.bilibili.com/vid ...

最新文章

  1. PyTorch里这个bug,你知道吗?
  2. 根据双眼的坐标对齐人脸Python实现
  3. 复杂网络下多码率视频流切换关键技术
  4. mysql 引擎是表级别_Mysql表引擎优化
  5. 使用 python 的 urllib2和 urllib模块爆破 form 表单的简易脚本
  6. C 11 实现的 100行 线程池
  7. Android官方开发文档Training系列课程中文版:分享简单数据之从其它APP接收简单数据
  8. LeetCode——1710. 卡车上的最大单元数
  9. 飞鸽传书渐成政务办公工具
  10. csrf防御 php,跨站请求伪造CSRF的防御实例(PHP版本)
  11. opensim源码安装教程
  12. 微信小程序之扫普通链接二维码打开小程序实现动态传递参数及踩坑总结
  13. 观大数据有感_观《大数据时代》有感
  14. 计算机ctrl加什么作用,计算机中快捷键ctrl加什么是返回上一步
  15. 【装机知识】机箱知识整理
  16. vivo Y85的usb调试模式在哪里,打开vivo Y85usb调试模式的方法
  17. easyuefi如何添加引导_easyuefi怎么用?easyuefi基本使用方法介绍
  18. Suzy找到实习了吗Day 13 | 栈和队列结束啦 239. 滑动窗口最大值,347. 前 K 个高频元素
  19. 修改演武今日可用数据显示
  20. 这样构建的用户画像!想不懂你的用户都难

热门文章

  1. 【实习项目记录】(四)Android 实现手机验证时,按钮倒计时60s
  2. [詹兴致矩阵论习题参考解答]习题1.13
  3. 一个测试新人的职业规划——三个月
  4. .net VS 全角问题
  5. prototype.js 源码解读v1.3.1版本
  6. Mr.J--HTTP学习笔记(二)-- URL详解
  7. [转]Boosting
  8. linux的nohup命令
  9. require js
  10. WPF 虚拟化 VirtualizingWrapPanel 和 VirtualLizingTilePanel