原生js的两种循环方法生成随机验证码

用原生js生成六位随机验证码（无canvas增加干扰）

验证码是我们日常上网常见的东西，今天主要介绍一下使用原生的js生成一个六位随机，包含数字，字母大小写的验证码。

首先先定义一个字符串，作为我们验证码的一个“字符库”，然后我们随机抽取六个就可以实现这个功能

            var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'

所以现在问题的关键就在于我们如何从这一长串字符中随机抽取六个字符呢？

这里用到了 Math.random()方法

Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值，是Java语言常用代码。例如：double a=Math.random()*(3-1)+1，设置一个随机1到3的变量。

在上方的字符串中，每一个字符都有一个专属于自己的 “名字”就是他们的索引下标，所以我们可以通过随机生成他们的索引下标最终找到对应的随机字符。

  for(var i = 1 ; i <= 6 ; i++){
                // 生成随机下标  范围  0  至 str.length-1   
                var num = parseInt( Math.random()*str.length );
                // 通过随机下标,获取随机字符,拼接入验证码字符串

这里的 Math.random()*str.length是一个最终的计算结果
计算之前是：
var num = parseInt(Math.random()*(str.length+1-1 -0)+0);

length+1的原因是因为索引下标是从0开始的，我们要随机的范围是整个字符串的长度到0。

下面是完整代码：

   function getVc() {

            var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
            var vc = '';
            for(var i = 0 ; i <= 6 ; i++){
                // var num = parseInt(Math.random()*(str.length+1-1 -0)+0);
                // vc += str[num];
                var num = parseInt(Math.random()*str.length);

                //去除重复
                // 如果需要验证码没有重复字符
                // 添加判断,当前新随机获取的字符,是否已经在 vc 验证码 字符串中
                // 如果存在,不执行写入
                // 如通不存在,再执行写入
                // indexOf() 方法,对字符串也同样适用
                // 没有匹配字符,返回值是-1

                // 在vc 中 查询 str[num]
                // 在vc 中 查询 当前 随机随机索引下标对应的字符,如果不在vc验证码中
                // 执行拼接操作


                if(vc.indexOf(str[num] )=== -1){
                    vc += str[num];
                }else{
                    i--;

               // 如果已经存在,本次不拼接,再循环一次
                }
            }          
            return vc;
        }
        document.write(getVc());

以上还涉及到一个小小的优化，就是我们生成的六位随机字符不会发生重复哦！

除此之外，我们还可以通过while循环来完成这个demo

扫描二维码关注公众号，回复： 11550996 查看本文章

其实道理还是一样的，只不过循环的方式不同罢了，while循环的出口为验证码的长度为6就停止循环

    // while语法获取随机字符串

        function setVc(){
            var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMONPQRSTUVWXYZ';
            var vc = '';
            while(vc.length !== 6){
                var num = parseInt( Math.random()*str.length );
                if( vc.indexOf(str[num]) === -1  ){
                    vc += str[num];
                }
            }
            return vc;
        }