js+canvas实现验证码功能


Posted in Javascript onSeptember 21, 2020

刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下:

js+canvas实现验证码功能

主要代码如下:

html

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
 <link rel="stylesheet" href="index.css" rel="external nofollow" >
</head>
<body>
 <div class="wrapper">
 <div class="inputBox">
  <input type="text" class = 'inputCaptcha' placeholder = "请输入验证码">
  <span class="captchaIcon"></span>
 </div>
 <p class="errorText"></p>
 <div class="canvasBox">
  <div class="imageBox">
  <canvas width =300 height=80 id = 'canvasCaptcha'></canvas>
  <input type="button" class='refresh'>
  </div>
 </div>
 <button class="captchaSubmit">submit</button>
 </div>
 <script src='./jquery.js'></script>
 <script src = './index.js'></script>
</body>
</html>

css

* {
 margin: 0;
 padding: 0;
}

.wrapper {
 width: 345px;
 border: 1px solid #ccc;
 border-radius: 10px;
 padding: 20px 10px;
 margin: 30px 30px;
}

.inputBox {
 width: 345px;
 margin: 0 auto 10px;
 position: relative;
}

.inputBox .inputCaptcha {
 display: inline-block;
 height: 50px;
 width: 86%;
 text-indent: 1em;
 border: 1px solid #ddd;
 border-radius: 5px;
}

.inputBox .captchaIcon {
 display: none;
 position: absolute;
 top: 50%;
 right: 0px;
 margin-top: -16px;
 width: 32px;
 height: 32px;
 background-size: 100% 100%;
}

.errorText {
 width: 345px;
 margin: 0 auto;
 font-size: 12px;
 color: red;
 display: none;
}

.canvasBox {
 width: 345px;
 margin: 10px auto;
 position: relative;
}

#canvasCaptcha {
 border-radius: 10px;
}

.canvasBox .refresh {
 width: 34px;
 height: 34px;
 position: absolute;
 right: 0px;
 top: 50%;
 margin-top: -17px;
 border: 0;
 border-radius: 6px;
 background-image: url('./images/update.png');
 background-size: cover;
}

.captchaSubmit {
 padding: 10px 20px;
 background-color: #62b900;
 border: 0;
 font-size: 20px;
 border-radius: 5px;
 color: #fff;
}

js

var arr = [0,1,2,3,4,5,6,7,8,9];
for(var i = 65;i < 122;i++){
 if(i>90&&i<97){
 continue;
 }
 arr.push(String.fromCharCode(i));
}
//每个验证码可能出现的字母或数字(区分大小写)
var len = arr.length;
//验证码的长度
var canvasStr,value;
//验证码值
function createCanvas(){
 canvasStr = '';
 value = '';
 for(var i =0 ;i < 6;i++){
 var a = arr[Math.floor(Math.random()*len)];
 canvasStr += a+' ';
 value += a; 
 }
//canvas
 var oCanvas = document.getElementById('canvasCaptcha');
 var ctx = oCanvas.getContext('2d');
 var w = oCanvas.width;
 var h = oCanvas.height;
 var oImg = new Image();
 oImg.src = './images/bg.jpg';
 oImg.onload = function(){
 var pattern = ctx.createPattern(oImg,'repeat');
 ctx.fillStyle = pattern;
 ctx.fillRect(0,0,w,h); 
 ctx.fillStyle = '#ccc';
 ctx.textAlign = 'center';
 ctx.font = '46px Roboto Slab';
 ctx.setTransform(1,-0.12,0.2,1,0,12);
 ctx.fillText(canvasStr,w/2,60);
 }
}

createCanvas();

//验证输入的验证码与图中验证码时候相等
function captcha(e){
 if(e == value){
 return true;
 }
 else{
 return false;
 }
}

//点击提交按钮时的结果
function showResult(){
 var inputValue = $('.inputCaptcha').val();
 
 if(inputValue == '' ||inputValue == null || inputValue == 'undefined'){
 $('.errorText').css({display:'inline-block'}).html('验证码不能为空,请重新输入!');
 $('.captchaIcon').css({display:'inline-block',backgroundImage:"url('./images/false.png')"});
 }else{
 var flag = captcha(inputValue);
 if(!flag){
  $('.errorText').css({display:'inline-block'}).html('验证码错误,请重新输入!');
  $('.captchaIcon').css({display:'inline-block',backgroundImage:"url('./images/false.png')"});
 }else{
  $('.captchaIcon').css({display:'inline-block',backgroundImage:"url('./images/true.png')"});
 }
 }
}
$('.captchaSubmit').click(showResult);//提交
$('.refresh').click(createCanvas);//刷新
//点击input框
$('.inputCaptcha').focus(function(){
 $('.errorText').add($('.captchaIcon')).fadeOut(100);
})

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

Javascript 相关文章推荐
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
微信小程序网络请求封装示例
Jul 24 #Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 #Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 #jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 #jQuery
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 #Javascript
微信小程序实现横向增长表格的方法
Jul 24 #Javascript
vue中使用sessionStorage记住密码功能
Jul 24 #Javascript
You might like
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
认识延迟时间为0的setTimeout
2008/05/16 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
python and or用法详解
2019/06/26 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
python向图片里添加文字
2019/11/26 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
数据库的约束含义
2012/09/09 面试题
初任培训自我鉴定
2013/10/07 职场文书
业务代表的岗位职责
2013/11/16 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
三年级学生评语大全
2014/12/26 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
元旦主持词开场白
2015/05/29 职场文书
婚庆答谢词大全
2015/09/29 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
MySQL创建管理LIST分区
2022/04/13 MySQL
MySQL 条件查询的常用操作
2022/04/28 MySQL