简单的随机乱码生成（验证码生成）| HTML-Toy模板网

这篇具有很好参考价值的文章主要介绍了简单的随机乱码生成（验证码生成）| HTML。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

想想自己也学了很久的前端的技术了，这两天在自己设计一个网站的时候，突然想到了登录验证码的这个东西，用了这个比较简单的随机码生成，大家如果有需要也可以用来参考。

代码展示（部分内容使用了jquery）：

HTML部分：

<div class="user_code">
     <input type="text" name="code" placeholder="请输入验证码">
     <div class="code_tip"></div>
     <div class="code_tip_box" title="点击刷新验证码"></div>
</div>

CSS部分

.user_code {
    position: relative;
    width: 80%;
    height: 36px;
    margin: 0 auto 20px;
    overflow: hidden;
}

.user_code input {
    float: left;
    width: 48%;
    height: 35px;
    background: none;
    text-align: center;
    border-bottom: 1px solid #000;
}

.user_code .code_tip,
.user_code .code_tip_box {
    float: right;
    width: 48%;
    height: 35px;
    border: 1px solid #aaa;
    text-align: center;
    line-height: 33px;
    font-size: 18px;
    background: none;
}

.user_code .code_tip_box {
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    background: rgba(200, 200, 200, 0.2);
    cursor: pointer;
}

JavaScript部分

// 验证码写入到指定位置
$(".code_tip").text(code(4));
$(".code_tip_box").click(() => {
    $(".code_tip").text(code(4));
});

/* 自动生成随机验证码 */
function code(code_length) {
    let code_tips = "";
    let content = [];

    let num = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

    /* 重复数字 */
    content = content.concat(num);

    /* 大写字母 */
    for (let a = 65; a <= 90; a++) {
        content.push(String.fromCharCode(a));
    };

    /* 重复数字 */
    content = content.concat(num);

    /* 小写字母 */
    for (let b = 97; b <= 122; b++) {
        content.push(String.fromCharCode(b));
    };

    /* 重复数字 */
    content = content.concat(num);

    /* 输出长度 */
    for (let c = 0; c < code_length; c++) {
        code_tips += content[Math.floor(Math.random() * content.length)];
    };

    return code_tips;
};

效果展示：

简单的随机乱码生成（验证码生成）| HTML