生成四位验证码案例（16）

最新推荐文章于 2022-07-13 10:51:28 发布

向上的二狗

最新推荐文章于 2022-07-13 10:51:28 发布

阅读量315

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_45738592/article/details/120270736

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>四位验证码</title>
    <link rel="stylesheet" href="css/reset.min.css">
    <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;
        }
    </style>
</head>

<body>
    <div id="codeBox">

    </div>
    <a href="javascript:;" id="link">看不清楚换一张</a>

    <script src="js"></script>
</body>

</html>

/*
 * 生成一个四位随机验证码
 * 
 * =>数字+字母 （简单）
 * =>找图片
 * =>滑动拼图
 * =>问答类
 * =>点击汉字拼成语
 * =>把倒着的文字或者图片正过来
 * =>...
 */
var codeBox = document.getElementById('codeBox'),
    link = document.getElementById('link');

//=>编写一个获取四位随机验证码的方法
function queryCode() {
    //1.准备验证码获取的范围（索引：0~61）
    var codeArea = 'qwertyuiopasdfghjklzxcvbnm' +
        'QWERTYUIOPASDFGHJKLZXCVBNM' +
        '1234567890';
    //2.我们只需要准备四个索引,即可在CODE-AREA中通过CHAR-AT方法获取到四个字符,把四个字符串拼接成一个字符串就是我们的验证码
    var result = '';
    for (var i = 0; i < 4; i++) {
        var n = Math.round(Math.random() * 61),//=>*(61-0)+0
            char = codeArea.charAt(n);
        result += char;
    }
    return result;
}

//=>开始加载页面（和点击LINK）需要生成一个验证码
codeBox.innerHTML = queryCode();//=>执行方法,把RETURN返回的四位验证码插入到CODE-BOX盒子中
link.onclick = function () {
    codeBox.innerHTML = queryCode();
};

/*
var codeBox = document.getElementById('codeBox'),
    link = document.getElementById('link');
*/

/*function queryCode() {
    var codeArea = 'qwertyuiopasdfghjklzxcvbnm' +
        'QWERTYUIOPASDFGHJKLZXCVBNM' +
        '1234567890';
    var result = '';
    for (var i = 1; i <= 4; i++) {
        var n = Math.round(Math.random() * 61),
            char = codeArea.charAt(n);
        //=>生成四个不重复的
        //=>CHAR当前本次循环找到的字符,这个字符不一定是我们想要的,如果已经在RESULT中存在了,不要这个字符了,重新找
        if (result.indexOf(char) > -1) {
            i--;
            continue;
        }
        result += char;
    }
    return result;
}*/

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;
        }
    }
    return result;
}

codeBox.innerHTML = queryCode();
link.onclick = function () {
    codeBox.innerHTML = queryCode();
};

向上的二狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
生成四位验证码案例（16）

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>四位验证码</title> <link rel="stylesheet" href="css/reset.min.css"> <style> #codeBox { display: inline-block; .
复制链接

扫一扫