JS實現4位隨機驗證碼

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

通過隨機數編寫一個不分大小寫且含數字的4位隨機數。

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部分

//隨機數function random(max,min){ return Math.round(Math.random()*(max-min)+min);}//隨機4位驗證碼function code(){ //將數字、小寫字母及大寫字母輸入 var str='1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM'; //給一個空字符串 var res=’’; //循環4次，得到4個字符 for(var i=0;i<4;i++){ //將得到的結果給字符串，調用隨機函數，0最小數，62表示數字加字母的總數 res+=str[random(0,62)]; } p.innerHTML=res;}code(); //調用驗證碼函數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='驗證碼錯誤'; }}

實現結果

總結

Math.round()：四舍五入Math.random()：隨機數toUpperCase()：將字符串轉為大寫

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。