JS 生成随机验证码

最新推荐文章于 2024-07-16 17:11:56 发布

珎珎啊

最新推荐文章于 2024-07-16 17:11:56 发布

阅读量429

点赞数

分类专栏：代码前端文章标签： javascript js

本文链接：https://blog.csdn.net/qq_43363773/article/details/105149890

版权

前端同时被 2 个专栏收录

113 篇文章 1 订阅

订阅专栏

代码

34 篇文章 0 订阅

订阅专栏

<style>
        #vc {
            border: 1px solid red;
            padding: 0px 10px;
        }
    </style>
</head>

<body>

    输入验证码 : <input type="text"> <span id="vc"></span> <button id="btn">看不清楚换一张</button>

    <script>
        var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // 页面一打开,就先写入一个验证码
        vc.innerHTML = setVc(str);

        // 每次点击验证码标签,都会刷新验证码
        vc.onclick = function(){
            vc.innerHTML = setVc(str);
        }

        // 点击按钮标签,切换验证码
        btn.onclick = function(){
            vc.innerHTML = setVc(str);
        } 
        
        
/* va.innerHTML */
        // 随机验证码
        // 六位随机验证码,内容是数字,字符(大小写)

        // 可以重复的内容
        // 生成随机下标,获取随机字母,拼接入字符串

        // var vc1 = '';

        // for (var i = 0; i <= 5; i++) {
        //     // 随机数的范围  0 - 最后一个字符的索引下标  0 - str.length-1 
        //     // 每次生成的随机数,也就是随机下标 
        //     var num = parseInt(Math.random() * str.length);

        //     vc1 += str[num];
        // }

        // console.log(vc1);

        // 生成内容没有重复
        // 生成的随机下标,提起的字母,如果不在验证码中,才会写入到验证码中
        // 也就是 indexOf()结果是 -1 才执行拼接操作

        var vc2 = '';

        for (var i = 0; i <= 5; i++) {
            var num = parseInt(Math.random() * str.length);
            // 获取的字符,不在验证码中,才拼接
            // 在 vc2 验证码 中 没有字符 str[num]
            // 原理和数组去重是一样的
            if (vc2.indexOf(str[num]) == -1) {
                // 如果字符不重复,就写入到验证码中
                vc2 += str[num];
            } else {
                // 如果字符重复,没有写入验证码
                // 就执行 i-- 重新执行一次循环,获取一个新的字符
                // 确保是6位字符
                i--;
            }
        }
        console.log(vc2);
 

        // 不重复的验证码方法2
        // 判断循环停止的条件是,验证码中有6个字符,循环就停止
        // 验证码.length 应该是 6 就停止循环
        // 循环次数与循环变量起始可以没有关系
        function setVc(ele) {
            // 这是函数执行,需要一个数据,最好可以已定义在函数内部,确定调用函数时,这个数据已经被定义了
            // var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
            var vc3 = '';
            // 如果验证码的长度,小于6,就继续循环拼接,如果是6,就停止循环了
            while (vc3.length < 6) {
                // 生成随机数,是随机索引下标
                var num = parseInt(Math.random() * ele.length);
                // 判断,如果随机下标对应的字符,没有在验证码中,就执行拼接写入操作
                if (vc3.indexOf(ele[num]) == -1) {
                    vc3 += ele[num];
                }
            }
            return vc3;
        } 
        // 总结:函数定义时需要注意的问题
        // 1,函数需要使用的数据,最好可以定义在函数内部,便于函数的使用
        // 2,定义在函数内部,在函数外部就无法直接使用了
        //   如果有其他程序,也需要使用,怎么解决?
        //   可以提前先定义好变量
        //   将变量作为参数,输入到函数中