代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../js/jquery-3.2.1.min.js"></script>
<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>驗證碼</title>
</head>
<body>
<div style="text-align: center;">
<form id="private_form" name="own_form">
<p> <input type="text" name="username" placeholder="input username"> </p>
<p> <input type="password" name="password" placeholder="input password"> </p>
<div>
<p style="font-size: 12px;">點擊下圖可刷新驗證碼</p>
<canvas id="canvas" style="margin-top: 0%; background-color: aquamarine;">
</canvas>
<p> <input type="text" name="validateCode" placeholder="輸入圖中的驗證碼" maxlength="5"> </p>
</div>
<p> <input type="button" id="own_button" value="OK"> </p>
</form>
</div>
</body>
<script>
//document.ready
$(function() {
var show_num=new Array();
draw(show_num);
console.log('validate code:'+show_num);
$('#canvas').on('click',function () {
draw(show_num);
})
function draw(show_num) {
var canvas_width=$('#canvas').width();
var canvas_height=$('#canvas').height();
var canvas=document.getElementById('canvas');
var context=canvas.getContext("2d");//獲取canvas畫圖的環境
canvas.width=canvas_width;
canvas.height=canvas_height;
var srcCode="A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z"+
",a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z"+
",1,2,3,4,5,6,7,8,9,0";
var aloneCode=srcCode.split(',');
//console.log('aloneCode- '+aloneCode);
var aloneCodeLen=aloneCode.length;
for (var index = 0; index <= 4; index++) {
var j=Math.floor(Math.random()*aloneCodeLen);//得到隨機的索引
var txt=aloneCode[j];
//console.log("txt- "+txt);
show_num[index]=txt;
var deg=Math.random()*30*Math.PI/180;//產生0~30的隨機弧度
var x=10+index*36;//字符在canvas上的x座標
var y=20+Math.random()*8;//字符在canvas上的y座標
context.font="bold 33px 微軟雅黑";
context.translate(x+5,y+5);
context.rotate(deg);
context.fillStyle=randomColor();
context.fillText(txt,0,0);
context.translate(-x+10*1.5,-y+10*2.5);
context.rotate(-deg);
}
//驗證碼上顯示線條
for (var index = 0; index <= 5; index++) {
context.strokeStyle=randomColor(); //stroke 一擊,輕觸,撫摸
context.beginPath();
context.moveTo(Math.random()*canvas_width,Math.random()*canvas_height);
context.lineTo(Math.random()*canvas_width,Math.random()*canvas_height);
context.stroke();
}
//驗證碼上顯示小點
for (var index = 0; index < 60; index++) {
context.strokeStyle=randomColor();
context.beginPath();
var x=Math.random()*canvas_width;
var y=Math.random()*canvas_height;
context.moveTo(x,y);
context.lineTo(x+1,y+1);
context.stroke();
}
//得到隨機的顏色值
function randomColor() {
var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
return 'rgb('+r+','+g+','+b+','+')';
}
}
//檢視變量類型
console.log('typeof(show_num): '+typeof(show_num+''));
//點擊校驗驗證碼
$('#own_button').click(function() {
verifyValidateCode();
})
function verifyValidateCode() {
// 注意要選對錶單ID
var v=document.forms['own_form']['validateCode'].value;
if (v==''||v==null) {
alert('驗證碼未輸入');
return;
}
v=v.toLowerCase();
var vcStr=show_num+'';
vcStr=vcStr.toLowerCase();
vcStr=vcStr.replace(/,/g,'');//去除字符串中的所有逗號
console.log('typeof(vcStr):'+typeof(vcStr))
console.log('提交的驗證碼: '+vcStr);
console.log(v===vcStr);
if (v===vcStr) {
console.log('驗證碼正確')
return true;
}else{
alert('輸入的驗證碼錯誤')
return false;
}
}
})
</script>
</html>