html5 cs js字母验证码,js+canvas实现验证码功能

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

主要代码如下:

html

Document

submit

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);

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。