js實現驗證碼案例
阿新 • • 發佈:2021-11-01
本文例項為大家分享了實現驗證碼的具體程式碼,供大家參考,具體內容如下
程式碼:
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
$(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,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 //每一http://www.cppcns.com個驗證碼繪製的起始點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) // 把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() } } // 隨機顏色 mouafV 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})` } })
隨便寫的案例,有錯誤還請大家多多指教
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。