js实现验证码案例

2022-04-15 697

本文实例为大家分享了js实现验证码的具体代码,供大家参考,具体内容如下

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})`
 
            }
 
        })

随便写的案例,有错误还请大家多多指教

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持NICE源码。

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript js实现验证码案例 https://www.niceym.com/18762.html

常见问题
  • 请您联系网站客服QQ,79024519,将第一时间处理您的问题,咨询请提供会员ID以及资源编号!
查看详情
  • 本站发布的压缩包如遇需要解压密码请尝试本站域名:www.niceym.com (通常为小写,如不对可试试大写) 或者:niceym.com 如遇无法解压,请您提供资源编号发送给本站客服!
查看详情