JavaScript隨機驗證碼函數(字母加數字隨機生成),指定驗證碼生成幾位,JavaScript點擊按鈕在頁面生成隨機驗證碼js源代碼


來來來,你是不是迫不及待想看源碼了,別,別這樣,咱們先來分析一下思路怎么樣?

首先我們知道js中生成隨機數的方法就是Math.random();

我們需要生成的隨機數從0~9或者A~Z或者a~z中隨機抽取一位;

那么我們此時有兩種選擇:

  方法一:生成一個數組,裝有單個字符,長度為26+26+10,一共62,也就是隨機下標0~61,對應的random寫法為:parseInt(Math.random()*62));//什么?你看不懂這句話,那建議你看看我另一篇文章Math.random小技巧   網址:https://www.cnblogs.com/shujiemao/p/13881957.html

 

  po個代碼

  function RandomVerificationCode(n) {
            var container = '1234567890qwertyuioplkjhgfdsazxcvbnmAQWSZXCDERFVTGBYHNUJMIKOLP';
            var arr = [];   //定義一個空數組來接收生成的隨機驗證碼
            for (var i = 0; i < n; i++) {
                var num = parseInt(Math.random() * 62);
                arr.push(container[num]);
            }
            
   n = arr.join("");  //使用n或者自定義一個變量來接收arr數組生成的字符串
            alert(n);    //來檢驗是否成功生成隨機數,可以刪除的語句
   return n;          //返回n,可以自定義一個變量去接收驗證碼
        }

        RandomVerificationCode(6);
 
 
 

  方法二:利用大小寫字母的ASCII碼值

      A~Z 的ASCII碼范圍為65~90;

      a~z的ASCII碼范圍為97~122;

      那么就生成一個隨機ASCII碼值范圍的數對應下標為0~121,然后再編寫一個判斷函數來判斷生成的隨機數是不是想要的ASCII碼值

     po個代碼:

    

   function RandomVerificationCode(n) {
            var arr = [];   //定義一個空數組來接收生成的隨機驗證碼
            for (var i = 0; i < n; i++) {
                var num = parseInt(Math.random()*123);
                if(num >=1 && num <=10){
                    arr.push(num);   //1~10直接添加給arr即可
                }else if(num >= 65 && num <= 90 || num >=97 && num <=122){
                    arr.push(String.fromCharCode(num));   //push()方法用來給arr添加元素,使用String.fromCharCode()方法可以將接收到的num也就是字母所對應的ASCII碼值轉換成對應字母
                }else{
                    i--;              //控制循環次數,如果遇到了不是需要的范圍對應的ASCII碼值,則i--來控制循環次數
                }
            }
            n = arr.join("");  //使用n或者自定義一個變量來接收arr數組生成的字符串
            alert(n);    //來檢驗是否成功生成隨機數,可以刪除的語句
   return n;          //返回n,可以自定義一個變量去接收驗證碼
        }

        RandomVerificationCode(6);

 

 

好了,只彈出來一個驗證碼是不是有點無聊,來實現用按鈕來控制頁面生成隨機驗證碼吧

好了好了,我好懶啊,我po一張圖你寫寫代碼練一練好不好嘛

 

讓我們一起努力成為一個合格的小前端吧,如果你覺得這篇文章幫助到你了,點個贊留句鼓勵再走吧!謝謝觀看


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM