您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

js实现验证码案例

51自学网 2022-02-21 13:38:42
  javascript

本文实例为大家分享了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})`             }         })

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

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


下载地址:
Vue实现两种路由权限控制方式
JavaScript canvas实现刮刮乐案例
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。