JS實現(xiàn)4位隨機(jī)驗證碼
更新時間：2020年10月19日 08:33:05 作者：Handsome_gir
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)4位隨機(jī)驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)4位隨機(jī)驗證碼的具體代碼，供大家參考，具體內(nèi)容如下
通過隨機(jī)數(shù)編寫一個不分大小寫且含數(shù)字的4位隨機(jī)數(shù)。
CSS樣式
p{
width: 60px;
height: 20px;
display: inline-block;
letter-spacing: 3px;
border: 1px solid red;
}
#div{
height: 20px;
margin-bottom: 10px;
}
#btn,p:hover{
cursor: default;
}
button{
display: block;
}
主體部分
<div id="box"> 驗證碼 <input type="text" id="int" /> <p id="p"></p> <div id="div"></div> <button id="btn">提交</button> </div>
JS部分
//隨機(jī)數(shù)
function random(max,min){
return Math.round(Math.random()*(max-min)+min);
}
//隨機(jī)4位驗證碼
function code(){
//將數(shù)字、小寫字母及大寫字母輸入
var str="1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM";
//給一個空字符串
var res='';
//循環(huán)4次，得到4個字符
for(var i=0;i<4;i++){
//將得到的結(jié)果給字符串，調(diào)用隨機(jī)函數(shù)，0最小數(shù)，62表示數(shù)字加字母的總數(shù)
res+=str[random(0,62)];
}
p.innerHTML=res;
}
code(); //調(diào)用驗證碼函數(shù)
p.onclick=code; //點擊也可以刷新驗證碼
//驗證驗證碼
btn.onclick=function(){
var int=document.getElementById("int").value;//獲取用戶輸入的值
var p=document.getElementById("p").innerText;//獲取驗證碼
//判斷用戶輸入與驗證碼的大寫一致(不分大小寫)
if(int.toUpperCase()==p.toUpperCase()){
div.innerHTML="驗證碼正確";
}else{
div.innerHTML="驗證碼錯誤";
}
}
實現(xiàn)結(jié)果
總結(jié)
Math.round()：四舍五入
Math.random()：隨機(jī)數(shù)
toUpperCase()：將字符串轉(zhuǎn)為大寫
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
蒙板是兩個div，其中popWindow樣式的div用于遮住整個頁面并半透明，感興趣的朋友可以參考下哈，希望對你學(xué)習(xí)js蒙版有所幫助2013-04-04
JS實現(xiàn)屏蔽網(wǎng)頁右鍵復(fù)制及ctrl+c復(fù)制的方法【2種方法】
這篇文章主要介紹了JS實現(xiàn)屏蔽網(wǎng)頁右鍵復(fù)制及ctrl+c復(fù)制的方法,結(jié)合實例形式分析了2種比較常用的屏蔽復(fù)制功能的技巧,需要的朋友可以參考下2016-09-09
下面小編就為大家?guī)硪黄獪\談js for循環(huán)輸出i為同一值的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
Table凍結(jié)表頭，大家對此應(yīng)該不會很陌生，實現(xiàn)很簡單，下面為大家詳細(xì)介紹下具體的實現(xiàn)，感興趣的朋友可以參考下2013-08-08
關(guān)于同時使用swiper和echarts遇到的問題及解決方法
這篇文章主要介紹了關(guān)于同時使用swiper和echarts遇到的問題及解決方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
uniapp插件uview下表單無法動態(tài)校驗的問題解決
最近項目中用到了uview?在做表單時用到了校驗,發(fā)現(xiàn)校驗不友好的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于uniapp插件uview下表單無法動態(tài)校驗的問題解決,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了小程序Request的另類用法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
ES6使用新特性Proxy實現(xiàn)的數(shù)據(jù)綁定功能實例
這篇文章主要介紹了ES6使用新特性Proxy實現(xiàn)的數(shù)據(jù)綁定功能,結(jié)合具體實例形式分析了ES6使用Proxy實現(xiàn)數(shù)據(jù)綁定具體原理、操作步驟與相關(guān)注意事項,需要的朋友可以參考下2020-05-05
跟我學(xué)習(xí)javascript的垃圾回收機(jī)制與內(nèi)存管理
跟我學(xué)習(xí)javascript的垃圾回收機(jī)制與內(nèi)存管理，感興趣的小伙伴們可以參考一下2015-11-11
CocosCreator骨骼動畫之龍骨DragonBones
這篇文章主要介紹了怎么在CocosCreator中使用骨骼動畫龍骨DragonBones，對骨骼動畫感興趣的同學(xué)，可以試一下2021-04-04