利用canvas写一个验证码小功能
刚刚开始接触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">
</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:;
padding:;
} .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:;
border-radius: 6px;
background-image: url('./images/update.png');
background-size: cover;
} .captchaSubmit {
padding: 10px 20px;
background-color: #62b900;
border:;
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);
})
利用canvas写一个验证码小功能的更多相关文章
- 【MFC】利用MFC写一个计时器小程序
1整体设计 创建对话框程序,并且设计对话框相关控件如图 相应的ID和对应的成员变量如图: 我的想法是这样的,只读属性的编辑框添加有CString类型的成员变量(如s_hour),在xxxDlg.h里另 ...
- 10分钟,利用canvas画一个小的loading界面
首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...
- 学了C语言,如何利用CURL写一个下载程序?—用nmake编译CURL并安装
在这一系列的前一篇文章学了C语言,如何为下载狂人写一个磁盘剩余容量监控程序?中,我们为下载狂人写了一个程序来监视磁盘的剩余容量,防止下载的东西撑爆了硬盘.可是,这两天,他又抱怨他的下载程序不好用,让我 ...
- 学了C语言,如何利用cURL写一个程序验证某个网址的有效性?
在<C程序设计伴侣>以及这几篇关于cURL的文章中,我们介绍了如何利用cURL写一个下载程序,从网络下载文件.可是当我们在用这个程序下载文件时,又遇到了新问题:如果这个网址是无效的,那么我 ...
- 利用 Python 写一个颜值测试小工具
我们知道现在有一些利用照片来测试颜值的网站或软件,其实使用 Python 就可以实现这一功能,本文我们使用 Python 来写一个颜值测试小工具. 很多人学习python,不知道从何学起.很多人学习p ...
- html5入门:教你用canvas写一个时钟
今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...
- Spring Security 实战干货:从零手写一个验证码登录
1. 前言 前面关于Spring Security写了两篇文章,一篇是介绍UsernamePasswordAuthenticationFilter,另一篇是介绍 AuthenticationManag ...
- 手把手教你写一个RN小程序!
时间过得真快,眨眼已经快3年了! 1.我的第一个App 还记得我14年初写的第一个iOS小程序,当时是给别人写的一个单机的相册,也是我开发的第一个完整的app,虽然功能挺少,但是耐不住心中的激动啊,现 ...
- 用canvas画一个的小画板(PC端移动端都能用)
前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...
随机推荐
- JAVA基础--面向对象08
一.final关键字 有的时候不想别人重写我的方法,使用final关键字修饰该方法,final:最后的,最终的,可以修饰类.修饰函数.修饰变量,修饰类:该类不能被继承:直接写在class关键字前面 修 ...
- git提交历史不显示自己账户的问题
其实这个问题本身也不大好描述.还是上图好了 问题就如同途中倒数第二次提交.明明就是我提交的,却不显示我的账号.个人页面也不反映这次提交. 后来发现问题所在,要想正确显示,必须要把对这个项目的邮箱设 ...
- python __builtins__ str类 (65)
65.'str', 字节转换成字符串.第一个传入参数是要转换的字节,第二个参数是按什么编码转换成字符串 class str(object) | str(object='') -> str | s ...
- python __builtins__ enumerate类 (21)
21.'enumerate', 用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列,同时列出数据和数据下标,一般用在 for 循环当中. class enumerate(object ...
- 五个demo案例带你学习PHP反序列化漏洞
一直想研究下php反序列化漏洞,花了几天时间做了个简单的了解..写篇文章记录下. 直白点就是围绕着serialize和unserialize两个函数. 一个用于序列化,一个用于反序列化. 我们通常把字 ...
- C++ 的输出格式
0 在C语言中很简单对输出的要求,然而在C++中有一丝的麻烦. 在下面的代码中所需要的是 #include<iostream> 基本输入/输出库 #include<iomanip&g ...
- Hexo瞎折腾系列(4) - 站点首页不显示文章全文
文章摘要设置 打开主题配置文件 _config.yml 文件,找到如下: # Automatically Excerpt. Not recommend. # Please use <!-- mo ...
- 连接php/mysql
1 安装php5.6 首先确保mysql已安装 ./configure --prefix=/app/php-5.6.36 --with-mysql=mysqlnd --enable-mysqlnd - ...
- Caffe实战一(环境准备及CPU模式下编译)
经过前几天的折腾,终于把Ubuntu16.04开发环境给搭建了起来,包括win10+Ubuntu双系统的安装.系统安装后的优化等等. 详见之前的文章:Ubuntu16.04.2 LTS 64bit系统 ...
- 洛谷 P4317 花神的数论题 || bzoj3209
https://www.lydsy.com/JudgeOnline/problem.php?id=3209 https://www.luogu.org/problemnew/show/P4317 设c ...