采用js生成登录的验证码
1，采用的技术点有html，css，jQuery
2，采用的开发工具vscode
一，效果如下
2,代码有需要的可用直接复制使用，但是需要自动引入jQuery文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="../js/jquery-3.3.1.min.js"></script><title>Document</title><style>input{width: 200px;height: 32px;border: 1px solid #000;box-sizing: border-box;margin-top: 2px;}#c1{vertical-align: middle;box-sizing: border-box;cursor: pointer;}#btn{display: block;margin-top: 20px;height: 32px;font-size: 16px;}</style>
</head>
<body><div class="code">用户名:<input type="text"><br>密 码:<input type="text"><br>验证码:<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>
</body>
<script>$(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){// 获取canvasvar 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.lengthfor(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_widthvar y = Math.random()*canvas_heightctx.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})`}})
</script>
</html>
