您好,登錄后才能下訂單哦!
這篇文章主要介紹“l(fā)ayui如何實(shí)現(xiàn)登陸界面驗(yàn)證碼”,在日常操作中,相信很多人在layui如何實(shí)現(xiàn)登陸界面驗(yàn)證碼問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”layui如何實(shí)現(xiàn)登陸界面驗(yàn)證碼”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
效果圖:
html:
<div class="layui-form-item"> <div class="layui-col-xs6" > <input type="text" value="" placeholder="請輸入驗(yàn)證碼(不區(qū)分大小寫)" class="input-val"> <canvas id="canvas" width="100" height="30"></canvas> </div> <div> <input type="button" value="登錄" class="layui-btn layui-btn-fluid" lay-submit lay-filter="login"> </div> </div>
接下來就是JS:
var show_num=[]; $(function() { draw(show_num); $("#canvas").on('click',function() { draw(show_num); }) });
再調(diào)用的兩個函數(shù):
function draw(show_num) { var canvas_width = $('#canvas').width(); var canvas_height = $('#canvas').height(); var canvas = document.getElementById("canvas");//獲取到canvas的對象,演員 var context = canvas.getContext("2d");//獲取到canvas畫圖的環(huán)境,演員表演的舞臺 canvas.width = canvas_width; canvas.height = canvas_height; var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0"; var aCode = sCode.split(","); var aLength = aCode.length;//獲取到數(shù)組的長度 for (var i = 0; i <= 3; i++) { var j = Math.floor(Math.random() * aLength);//獲取到隨機(jī)的索引值 var deg = Math.random() * 30 * Math.PI / 180;//產(chǎn)生0~30之間的隨機(jī)弧度 var txt = aCode[j];//得到隨機(jī)的一個內(nèi)容 show_num[i] = txt.toLowerCase(); var x = 10 + i * 20;//文字在canvas上的x坐標(biāo) var y = 20 + Math.random() * 8;//文字在canvas上的y坐標(biāo) context.font = "bold 23px 微軟雅黑"; context.translate(x, y); context.rotate(deg); context.fillStyle = randomColor(); context.fillText(txt, 0, 0); context.rotate(-deg); context.translate(-x, -y); } for (var i = 0; i <= 5; i++) { //驗(yàn)證碼上顯示線條 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 (var i = 0; i <= 30; i++) { //驗(yàn)證碼上顯示小點(diǎn) context.strokeStyle = randomColor(); context.beginPath(); var x = Math.random() * canvas_width; var y = Math.random() * canvas_height; context.moveTo(x, y); context.lineTo(x + 1, y + 1); context.stroke(); } } function randomColor() {//得到隨機(jī)的顏色值 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 + ")"; }
樣式得自己根據(jù)項(xiàng)目調(diào)配噢 下面是我的樣式:
<style> .code { width: 100%; margin: 0 auto; } .input-val { width: 63%; background: #ffffff; height: 2.8rem; padding: 0 2%; border-radius: 5px; border: none; border: 1px solid rgba(0,0,0,.2); font-size: 0.9rem; } #canvas { float: right; display: inline-block; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; } </style>
到此,關(guān)于“l(fā)ayui如何實(shí)現(xiàn)登陸界面驗(yàn)證碼”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。