js验证码案例 js实现验证码案例
Q青N年 人气:0想了解js实现验证码案例的相关内容吗，Q青N年在本文为您仔细讲解js验证码案例的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：js,验证码，下面大家一起来学习吧。
css代码：
input{
width: 200px;
height: 32px;
border: 1px solid #000;
box-sizing: border-box;
}
#c1{
vertical-align: middle;
box-sizing: border-box;
cursor: pointer;
}
#btn{
display: block;
margin-top: 20px;
height: 32px;
font-size: 16px;
}
HTML代码：
<div class="code">
<input type="text" value="" id="inputValue" placeholder="请输入验证码（不区分大小写）">
<canvas id="c1" width="100" height="30" style="border:1px solid black"></canvas>
<br>
<button id="btn">提交</button>
</div>
js代码：
使用了部分jQuery的方法，请记得先引入jQuery
$(function(){
// 存放随机的验证码
var showNum = []
draw(showNum)
$("#c1").click(function(){
draw(showNum)
})
$("#btn").click(function(){
var s = $("#inputValue").val().toLowerCase()
var s1 = showNum.join("")
if (s==s1) {
alert("提交成功")
}else{
alert("验证码错误")
}
draw(showNum)
})
// 封装一个把随机验证码放在画布上
function draw(showNum){
// 获取canvas
var canvas = $("#c1")
var ctx = canvas[0].getContext("2d")
// 获取画布的宽高
var canvas_width = canvas.width()
var canvas_height = canvas.height()
// 清空之前绘制的内容
// 0,0清空的起始坐标
// 矩形的宽高
ctx.clearRect(0,0,canvas_width,canvas_height)
// 开始绘制
var scode = "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,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,"
var arrCode = scode.split(",")
var arrLength = arrCode.length
for(var i = 0;i<4;i++){
var index = Math.floor(Math.random()*arrCode.length)
var txt = arrCode[index]//随机一个字符
showNum[i] = txt.toLowerCase()//转化为小写存入验证码数组
// 开始控制字符的绘制位置
var x = 10 +20*i //每一个验证码绘制的起始点x坐标
var y = 20 + Math.random()*8// 起始点y坐标
ctx.font = "bold 20px 微软雅黑"
// 开始旋转字符
var deg = Math.random*-0.5
// canvas 要实现绘制内容具有倾斜的效果，必须先平移，目的是把旋转点移动到绘制内容的地方
ctx.translate(x,y)
ctx.rotate(deg)
// 设置绘制的随机颜色
ctx.fillStyle = randomColor()
ctx.fillText(txt,0,0)
// 把canvas复原
ctx.rotate(-deg)
ctx.translate(-x,-y)
}
for(var i = 0;i<30;i++){
if (i<5) {
// 绘制线
ctx.strokeStyle = randomColor()
ctx.beginPath()
ctx.moveTo(Math.random()*canvas_width,Math.random()*canvas_height)
ctx.lineTo(Math.random()*canvas_width,Math.random()*canvas_height)
ctx.stroke()
}
// 绘制点
ctx.strokeStyle = randomColor()
ctx.beginPath()
var x = Math.random()*canvas_width
var y = Math.random()*canvas_height
ctx.moveTo(x,y)
ctx.lineTo(x+1,y+1)
ctx.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})`
}
})
随便写的案例，有错误还请大家多多指教
加载全部内容