（前端模拟）字母加数字四位不重复验证码的实现

最新推荐文章于 2024-01-14 08:35:47 发布

屋昂仼

最新推荐文章于 2024-01-14 08:35:47 发布

阅读量3.8k

点赞数 3

分类专栏： javascript 文章标签：验证码前端验证码的实现点击获取验证码

本文链接：https://blog.csdn.net/jmszl1991/article/details/79754763

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

验证码的实现，通常是由后端操作。今天带来一个前端模拟验证码的js代码，要求是点击刷新，得到四位字母加数字且不重复的验证码。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 160px;
            height: 36px;
            background-color: #f40;
            line-height: 36px;
            text-align: center;
            color: #fff;
            font-size: 16px;
            margin: 30px auto;
            cursor: pointer;

            -webkit-user-select: none; /*禁止用户选中文字*/
        }
    </style>
</head>
<body>
<div id="code_box">
    Af3D
</div>

<script>
    var code_box = document.getElementById("code_box");

    function refreshCode() {

        var code = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM',//62个字符 随机选择4位
            char = '',
            result = '';

        for (var i = 0; i < 4; i++) {

            //随机选择一位  （0,61） 写出0到61的随机的索引数字
            var code_index = Math.round(Math.random()*61);

            //得到随机的索引  取出随机地字符
            var char = code[code_index];

            //随机取出的字符 存在几个相同重复的问题 ，而且对于字母，不能区分大小写。
            // 避免重复的思路是：取出字符之后,和最后的result对比一下，看看里边是不是已经存在了，如果存在本次循环就终止，进行下一次

            if (result.toUpperCase().indexOf(char.toUpperCase()) > -1)

            //indexOf() == -1 说明结果里边没有要找的字符 那么 > -1 就是 里边有重复的字符
            {
                i --;
                //为什么会 --？ 因为如果条件成立，那么本轮循环就结束进行下一轮循环（自然i就加1了），那么本轮本应该取出的字符就没有了
                //到最后会少一个字符 缺席
                continue;//终止本轮循环 进行下一轮
            }

            result += char;
        }

        code_box.innerHTML = result;
    }


    //点击事件

    code_box.onclick = refreshCode;



</script>



</body>
</html>