layui實現(xiàn)登陸界面驗證碼
更新時間:2021年11月26日 17:31:27 作者:雕刻刀
這篇文章主要為大家詳細介紹了layui實現(xiàn)登陸界面驗證碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了layui實現(xiàn)登陸界面驗證碼的具體代碼,供大家參考,具體內(nèi)容如下
效果圖:
html:
<div class="layui-form-item"> <div class="layui-col-xs6" > <input type="text" value="" placeholder="請輸入驗證碼(不區(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);//獲取到隨機的索引值 var deg = Math.random() * 30 * Math.PI / 180;//產(chǎn)生0~30之間的隨機弧度 var txt = aCode[j];//得到隨機的一個內(nèi)容 show_num[i] = txt.toLowerCase(); var x = 10 + i * 20;//文字在canvas上的x坐標 var y = 20 + Math.random() * 8;//文字在canvas上的y坐標 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++) { //驗證碼上顯示線條 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++) { //驗證碼上顯示小點 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() {//得到隨機的顏色值 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ù)項目調(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>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
關于js new Date() 出現(xiàn)NaN 的分析
在一個項目中需要進行日期的格式化,后臺傳到前端是時間的整數(shù)(Date.getTime),當后臺數(shù)據(jù)返回字符串時,發(fā)現(xiàn)轉(zhuǎn)換日期時在ie下變成NaN,但是真的是這樣嗎?接下來我們慢慢分析2012-10-10解析javascript系統(tǒng)錯誤:-1072896658的解決辦法
問題出現(xiàn)在用到ajax的場合。昨天還正常的程序,今天運行就有javascript系統(tǒng)錯誤:-1072896658的2013-07-07avalon js實現(xiàn)仿google plus圖片多張拖動排序附源碼下載
這篇文章主要介紹了avalon js實現(xiàn)仿google plus圖片多張拖動排序附源碼下載的相關資料,需要的朋友可以參考下2015-09-09原生態(tài)js,鼠標按下后,經(jīng)過了那些單元格的簡單實例
下面小編就為大家?guī)硪黄鷳B(tài)js,鼠標按下后,經(jīng)過了那些單元格的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08