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 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
node.js文件操作系统实例详解
Nov 05 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 Javascript
javascript实现时钟动画
Dec 03 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使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
PHP的PDO连接讲解
2019/01/24 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
python中MySQLdb模块用法实例
2014/11/10 Python
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
化学教师自荐信范文
2013/12/28 职场文书
酒店总经理助理职责
2014/02/12 职场文书
关于元旦的广播稿
2014/02/16 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
九华山导游词
2015/02/03 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书