js实现验证码案例
更新时间:2021年10月29日 16:46:15 作者:Q青N年
这篇文章主要为大家详细介绍了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})` } })
随便写的案例,有错误还请大家多多指教
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
javascript制作loading动画效果 loading效果
项目中多处要给ajax提交的时候增加等待动画效果,所以就写了一个简单的通用js方法,大家参考使用吧2014-01-01JavaScript Event事件学习第一章 Event介绍
Events是每一个JavaScript程序核心。什么是事件处理,它有什么问题和怎样写出跨浏览器的代码,我将在这一章做一个概述。我也会提供一些有精彩的关于事件处理程序的细节的文章。2010-02-02基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
本文主要给大家介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验,2016-05-05使用coffeescript编写node.js项目的方法汇总
Node.js 基于JavaScript编写应用,JavaScript是我的主要开发语言。CoffeeScript是编译为JavaScript的编程语言。CoffeeScript是一个非常高阶的语言,将JavaScript、Ruby和Python中我最爱的部分结合在了一起。小编给大家介绍下使用coffeescript编写node.js项目的方法2015-08-08
最新评论