快捷導(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)為大寫

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

您可能感興趣的文章:

相關(guān)文章

表單提交(插入效果)javascript
表單提交(插入效果)javascript...
2006-08-08
深入淺析JS中的嚴(yán)格模式
嚴(yán)格模式就是使JS編碼更加規(guī)范化的模式,消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為。下面通過代碼相結(jié)合的形式給大家介紹js中的嚴(yán)格模式，感興趣的朋友一起看看吧
2018-06-06
使用JavaScript實(shí)現(xiàn)圖片的自動(dòng)輪播
在網(wǎng)站開發(fā)中,經(jīng)常會(huì)遇到需要展示多張圖片并自動(dòng)切換的需求,這就需要使用JavaScript來實(shí)現(xiàn)圖片的自動(dòng)輪播功能,本文將通過一個(gè)簡(jiǎn)單的例子,演示如何用JavaScript實(shí)現(xiàn)圖片的自動(dòng)輪播,需要的朋友可以參考下
2013-03-03
JavaScript 對(duì)引擎、運(yùn)行時(shí)、調(diào)用堆棧的概述理解
這篇文章旨在深入挖掘JavaScript，以及向大家解釋JavaScript是如何工作的。非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-10-10
JS實(shí)現(xiàn)生成會(huì)變大變小的圓環(huán)實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)生成會(huì)變大變小的圓環(huán),涉及javascript數(shù)學(xué)運(yùn)算及頁面樣式動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
Java SE 9 多版本兼容 JAR 包示例
這篇文章主要介紹了Java SE 9 多版本兼容 JAR 包示例,Java 9 版本中增強(qiáng)了Jar 包多版本字節(jié)碼文件格式支持，也就是說在同一個(gè) Jar 包中我們可以包含多個(gè) Java 版本的 class 文件，更多相關(guān)內(nèi)容感興趣的小伙伴可以參考一下
2022-08-08
JavaScript Uploadify文件上傳實(shí)例
這篇文章主要為大家詳細(xì)介紹了Uploadify文件上傳小實(shí)例，一個(gè)簡(jiǎn)單的jsp上傳小功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
javascript中兼容主流瀏覽器的動(dòng)態(tài)生成iframe方法
這篇文章主要介紹了javascript中兼容主流瀏覽器的動(dòng)態(tài)生成iframe方法,需要的朋友可以參考下
2014-05-05
webpack分離css單獨(dú)打包的方法
這篇文章主要介紹了webpack分離css單獨(dú)打包的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
js中如何對(duì)嵌套數(shù)組進(jìn)行filter過濾
這篇文章主要介紹了js中如何對(duì)嵌套數(shù)組進(jìn)行filter過濾問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06