两种生成四位不重复的验证码方法你会吗？两种生成四位不重复的验证码方法

两种生成四位不重复的验证码方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       #codeBox {
        display:inline-block;
        width:80px;
        height: 35px;
        line-height:35px;
        border:1px solid #AAA;
        text-align:center;
        font-size:18px;
        letter-spacing: 5px;
       }
       #link {
           display:inline-block;
           text-decoration:none;
       }
    </style>
</head>
<body>
    <div id="codeBox">
     Ab4F
    </div>
    <a href="javascript:;" id="link">看不清楚，换一张</a>
    <script>
      var codeBox=document.getElementById('codeBox');
          link=document.getElementById('link');
      function queryCode() { 
        var codeArea = 'qwertyuiopasdfghjklzxcvbnm'+
        'QWERTYUIOPASDFGHJKLZXCVBNM'+
        '1234567890';
      
        var result = '';
        //=>第二种方法
            while (result.length < 4){
                 var n = Math.round(Math.random() * 61),
                     char = codeArea.charAt(n);
            if (result.indexOf(char) === -1){
                result += char;
              }
            }
         //=>第一种方法
        // for (var i=0; i<4;i++){  //循环四次
        //    var n = Math.round(Math.random() * 61); //=>(61-0)+0
        //        char = codeArea.charAt(n);
               //=>生成四个不重复的
               //=>char当前本次循环找到的字符，这个字符不一定使我们想要的，如果已经在result中已经存在了，不要这个字符，重新找
      
            //    if(result.indexOf(char) > -1 ){
            //     i--;
            //     continue;
            //    }
        
            
        //     result += char;
           
        // }
        return result;
      }
     
      codeBox.innerHTML = queryCode();
      link.onclick = function (){
          codeBox.innerHTML = queryCode();
      }
    </script>
</body>
</html>