快捷導(dǎo)航

JS實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼

更新時(shí)間：2020年10月19日 08:33:05 作者：Handsome_gir

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼的具體代碼，供大家參考，具體內(nèi)容如下

通過隨機(jī)數(shù)編寫一個(gè)不分大小寫且含數(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">
驗(yàn)證碼
 <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位驗(yàn)證碼
function code(){
 //將數(shù)字、小寫字母及大寫字母輸入
 var str="1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM";
 //給一個(gè)空字符串
 var res='';
 //循環(huán)4次，得到4個(gè)字符
 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)用驗(yàn)證碼函數(shù)
p.onclick=code; //點(diǎn)擊也可以刷新驗(yàn)證碼
//驗(yàn)證驗(yàn)證碼
btn.onclick=function(){
 var int=document.getElementById("int").value;//獲取用戶輸入的值
 var p=document.getElementById("p").innerText;//獲取驗(yàn)證碼
 //判斷用戶輸入與驗(yàn)證碼的大寫一致(不分大小寫)
 if(int.toUpperCase()==p.toUpperCase()){
 div.innerHTML="驗(yàn)證碼正確";
 }else{
 div.innerHTML="驗(yàn)證碼錯(cuò)誤";
 }
}

實(shí)現(xiàn)結(jié)果

總結(jié)

Math.round()：四舍五入
Math.random()：隨機(jī)數(shù)
toUpperCase()：將字符串轉(zhuǎn)為大寫

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)在頁面上彈出蒙板技巧簡單實(shí)用
蒙板是兩個(gè)div，其中popWindow樣式的div用于遮住整個(gè)頁面并半透明，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)js蒙版有所幫助
2013-04-04
JS實(shí)現(xiàn)屏蔽網(wǎng)頁右鍵復(fù)制及ctrl+c復(fù)制的方法【2種方法】
這篇文章主要介紹了JS實(shí)現(xiàn)屏蔽網(wǎng)頁右鍵復(fù)制及ctrl+c復(fù)制的方法,結(jié)合實(shí)例形式分析了2種比較常用的屏蔽復(fù)制功能的技巧,需要的朋友可以參考下
2016-09-09
淺談js for循環(huán)輸出i為同一值的問題
下面小編就為大家?guī)硪黄獪\談js for循環(huán)輸出i為同一值的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-03-03
Table凍結(jié)表頭示例代碼
Table凍結(jié)表頭，大家對(duì)此應(yīng)該不會(huì)很陌生，實(shí)現(xiàn)很簡單，下面為大家詳細(xì)介紹下具體的實(shí)現(xiàn)，感興趣的朋友可以參考下
2013-08-08
關(guān)于同時(shí)使用swiper和echarts遇到的問題及解決方法
這篇文章主要介紹了關(guān)于同時(shí)使用swiper和echarts遇到的問題及解決方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04
uniapp插件uview下表單無法動(dòng)態(tài)校驗(yàn)的問題解決
最近項(xiàng)目中用到了uview?在做表單時(shí)用到了校驗(yàn),發(fā)現(xiàn)校驗(yàn)不友好的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于uniapp插件uview下表單無法動(dòng)態(tài)校驗(yàn)的問題解決,需要的朋友可以參考下
2022-12-12
小程序Request的另類用法詳解
這篇文章主要介紹了小程序Request的另類用法詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
ES6使用新特性Proxy實(shí)現(xiàn)的數(shù)據(jù)綁定功能實(shí)例
這篇文章主要介紹了ES6使用新特性Proxy實(shí)現(xiàn)的數(shù)據(jù)綁定功能,結(jié)合具體實(shí)例形式分析了ES6使用Proxy實(shí)現(xiàn)數(shù)據(jù)綁定具體原理、操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2020-05-05
跟我學(xué)習(xí)javascript的垃圾回收機(jī)制與內(nèi)存管理
跟我學(xué)習(xí)javascript的垃圾回收機(jī)制與內(nèi)存管理，感興趣的小伙伴們可以參考一下
2015-11-11
CocosCreator骨骼動(dòng)畫之龍骨DragonBones
這篇文章主要介紹了怎么在CocosCreator中使用骨骼動(dòng)畫龍骨DragonBones，對(duì)骨骼動(dòng)畫感興趣的同學(xué)，可以試一下
2021-04-04