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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
深入探讨前端框架react
Dec 09 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
javascript RegExp 使用说明
May 21 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
js实现简单点赞操作
Mar 17 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 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
php表单提交实例讲解
2015/11/12 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
python3多线程知识点总结
2019/09/26 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
初中差生评语
2014/12/29 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Java SSM配置文件案例详解
2021/08/30 Java/Android
利用Java连接Hadoop进行编程
2022/06/28 Java/Android
TypeScript 内置高级类型编程示例
2022/09/23 Javascript