JS驗(yàn)證碼實(shí)現(xiàn)代碼
廢話不多說(shuō)了,直接給大家貼代碼了,具體代碼如下所示:
<script language="javascript"> var code; //在全局 定義驗(yàn)證碼 function createCode() { //創(chuàng)建驗(yàn)證碼函數(shù) code = ""; var codeLength =4;//驗(yàn)證碼的長(zhǎng)度 var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'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');//所有候選組成驗(yàn)證碼的字符,當(dāng)然也可以用中文的 for(var i=0;i<codeLength;i++) { var charIndex =Math.floor(Math.random()*36); code +=selectChar[charIndex]; } // 設(shè)置驗(yàn)證碼的顯示樣式,并顯示 document.getElementById("discode").style.fontFamily="Fixedsys"; //設(shè)置字體 document.getElementById("discode").style.letterSpacing="5px"; //字體間距 document.getElementById("discode").style.color="#0ab000"; //字體顏色 document.getElementById("discode").innerHTML=code; // 顯示 } function but() {//驗(yàn)證驗(yàn)證碼輸入是否正確 var val1=document.getElementById("t1").value; var val2=code; if(val1!=val2){ alert("驗(yàn)證碼錯(cuò)誤!"); document.getElementById('t1').value=""; } } </script>
驗(yàn)證碼框
<div class="input"> <input id="t1" type="text" name="u" placeholder="驗(yàn)證碼" onblur="but()" /> <span id="discode"></span> <input type="button" value="換一換" class="c" style="height:20px;"onClick="createCode()"> </div>
效果
總結(jié)
以上所述是小編給大家介紹的JS驗(yàn)證碼實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JavaScript生成隨機(jī)驗(yàn)證碼代碼實(shí)例
- JS實(shí)現(xiàn)點(diǎn)擊發(fā)送驗(yàn)證碼 xx秒后重新發(fā)送功能
- php/JS實(shí)現(xiàn)的生成隨機(jī)密碼(驗(yàn)證碼)功能示例
- js實(shí)現(xiàn)隨機(jī)8位驗(yàn)證碼
- JS 驗(yàn)證碼功能的三種實(shí)現(xiàn)方式
- js+canvas實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證碼功能
- js實(shí)現(xiàn)登錄注冊(cè)框手機(jī)號(hào)和驗(yàn)證碼校驗(yàn)(前端部分)
- JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果
相關(guān)文章
javascript中match函數(shù)的用法小結(jié)
本篇文章主要是對(duì)javascript中match函數(shù)的用法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈實(shí)例代碼
這篇文章主要介紹了Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈實(shí)例代碼,可實(shí)現(xiàn)圓圈的旋轉(zhuǎn)與運(yùn)動(dòng)效果,涉及javascript動(dòng)態(tài)操作頁(yè)面元素屬性及進(jìn)行相應(yīng)數(shù)學(xué)運(yùn)算的技巧,需要的朋友可以參考下2015-08-08JS根據(jù)Unix時(shí)間戳顯示發(fā)布時(shí)間是多久前【項(xiàng)目實(shí)測(cè)】
小編最近在實(shí)現(xiàn)這樣的需求類似微信朋友圈顯示發(fā)布時(shí)間為距離當(dāng)前時(shí)間多久之前這樣的功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2019-07-07Javascript 5種方法實(shí)現(xiàn)過(guò)濾刪除前后所有空格
這篇文章主要介紹Javascript 5種過(guò)濾刪除前后所有空格的方法,比較實(shí)用,需要的朋友可以參考下。2016-06-06理解JavaScript的caller,callee,call,apply
文章挺好的,雖然我用的是jQuery,但感覺(jué)還是有些用的~~~2009-04-04去除element-ui中Dialog對(duì)話框遮罩層方法詳解
這篇文章主要為大家介紹了去除element-ui中Dialog對(duì)話框遮罩層方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12