layui實(shí)現(xiàn)登陸界面驗(yàn)證碼
本文實(shí)例為大家分享了layui實(shí)現(xiàn)登陸界面驗(yàn)證碼的具體代碼,供大家參考,具體內(nèi)容如下
效果圖:
html:
<div class="layui-form-item"> <div class="layui-col-xs6" > <input type="text" value="" placeholder="請(qǐng)輸入驗(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)用的兩個(gè)函數(shù):
function draw(show_num) { var canvas_width = $('#canvas').width(); var canvas_height = $('#canvas').height(); var canvas = document.getElementById("canvas");//獲取到canvas的對(duì)象,演員 var context = canvas.getContext("2d");//獲取到canvas畫圖的環(huán)境,演員表演的舞臺(tái) 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ù)組的長(zhǎng)度 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ī)的一個(gè)內(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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解JavaScript的懶加載是如何實(shí)現(xiàn)的
懶加載(Lazy Loading)是一種在軟件開發(fā)中常用的優(yōu)化技術(shù),它主要用于延遲加載資源,直到真正需要使用的時(shí)候才進(jìn)行加載,這樣可以減少初始加載的時(shí)間和資源消耗,并提升用戶體驗(yàn),本文給大家詳細(xì)介紹了JavaScript的懶加載是如何實(shí)現(xiàn)的,需要的朋友可以參考下2024-01-01關(guān)于js new Date() 出現(xiàn)NaN 的分析
在一個(gè)項(xiàng)目中需要進(jìn)行日期的格式化,后臺(tái)傳到前端是時(shí)間的整數(shù)(Date.getTime),當(dāng)后臺(tái)數(shù)據(jù)返回字符串時(shí),發(fā)現(xiàn)轉(zhuǎn)換日期時(shí)在ie下變成NaN,但是真的是這樣嗎?接下來我們慢慢分析2012-10-10解析javascript系統(tǒng)錯(cuò)誤:-1072896658的解決辦法
問題出現(xiàn)在用到ajax的場(chǎng)合。昨天還正常的程序,今天運(yùn)行就有javascript系統(tǒng)錯(cuò)誤:-1072896658的2013-07-07avalon js實(shí)現(xiàn)仿google plus圖片多張拖動(dòng)排序附源碼下載
這篇文章主要介紹了avalon js實(shí)現(xiàn)仿google plus圖片多張拖動(dòng)排序附源碼下載的相關(guān)資料,需要的朋友可以參考下2015-09-09原生態(tài)js,鼠標(biāo)按下后,經(jīng)過了那些單元格的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄鷳B(tài)js,鼠標(biāo)按下后,經(jīng)過了那些單元格的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08JS實(shí)現(xiàn)簡(jiǎn)單加減購(gòu)物車效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單加減購(gòu)物車效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08