这篇文章主要介绍JS怎么实现验证码，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

具体代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>验证码-亿速云(yisu.com)</title><style>.input-val{width:150px;height:30px;border:1pxsolid#ddd;box-sizing:border-box;/*box-sizing属性允许你以某种方式定义某些元素，以适应指定区域。*/}#canvas{vertical-align:middle;/*vertical-align属性设置一个元素的垂直对齐。*/box-sizing:border-box;border:1pxsolid#ddd;cursor:pointer;}.btn{display:block;margin-top:10px;height:30px;width:80px;font-size:16px;color:#fff;background-color:#409EFE;border:1pxsolid#EBEDEF;border-radius:50px;}</style></head><scripttype="text/javascript"src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(function(){varshow_num=[];draw(show_num);$("#canvas").on('click',function(){draw(show_num);})$(".btn").on('click',function(){varval=$(".input-val").val().toLowerCase();//toLowerCase()函数将字符串中的所有字符转为小写。所以输入框不区分大小写。varnum=show_num.join("");if(val==''){alert('请输入验证码！');}elseif(val==num){alert('提交成功！');$(".input-val").val('');}else{alert('验证码错误！请重新输入！');$(".input-val").val('');}})})functiondraw(show_num){//生成并渲染出验证码图形varcanvas_width=$('#canvas').width();varcanvas_height=$('#canvas').height();varcanvas=document.getElementById("canvas");//获取canvasvarcontext=canvas.getContext("2d");//获取到canvas画图的环境canvas.width=canvas_width;canvas.height=canvas_height;varsCode="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,m,n,p,q,r,s,t,u,v,w,x,y,z,1,2,3,4,5,6,7,8,9,0";varaCode=sCode.split(",");varaLength=aCode.length;//获取到数组的长度for(vari=0;i<4;i++){//这里的for循环可以控制验证码位数varj=Math.floor(Math.random()*aLength);//获取到随机的索引值vardeg=Math.random()-0.5;//产生一个随机弧度vartxt=aCode[j];//得到随机的一个内容show_num[i]=txt.toLowerCase();varx=10+i*20;//文字在canvas上的x坐标vary=20+Math.random()*8;//文字在canvas上的y坐标context.font="bold24px微软雅黑";context.translate(x,y);context.rotate(deg);context.fillStyle=randomColor();context.fillText(txt,0,0);context.rotate(-deg);context.translate(-x,-y);}for(vari=0;i<=5;i++){//验证码上显示线条context.strokeStyle=randomColor();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(vari=0;i<=20;i++){//验证码上的小点context.strokeStyle=randomColor();//随机生成context.beginPath();varx=Math.random()*canvas_width;vary=Math.random()*canvas_height;context.moveTo(x,y);context.lineTo(x+1,y+1);context.stroke();}}functionrandomColor(){//得到随机的颜色值varr=Math.floor(Math.random()*256);varg=Math.floor(Math.random()*256);varb=Math.floor(Math.random()*256);return"rgb("+r+","+g+","+b+")";}</script><body><divclass="code"><inputtype="text"value=""placeholder="请输入验证码"class="input-val"><canvasid="canvas"width="100"height="30"></canvas><buttonclass="btn">验证</button></div></body></html>

以上是“JS怎么实现验证码”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！