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

通過隨機數(shù)編寫一個不分大小寫且含數(shù)字的4位隨機數(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' /> <p id='p'></p> <div id='div'></div> <button id='btn'>提交</button></div>

JS部分

//隨機數(shù)function random(max,min){ return Math.round(Math.random()*(max-min)+min);}//隨機4位驗證碼function code(){ //將數(shù)字、小寫字母及大寫字母輸入 var str='1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM'; //給一個空字符串 var res=’’; //循環(huán)4次，得到4個字符 for(var i=0;i<4;i++){ //將得到的結(jié)果給字符串，調(diào)用隨機函數(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()：隨機數(shù)toUpperCase()：將字符串轉(zhuǎn)為大寫

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。