master

分支 (1)

管理

管理

master

js--jquery-special-effects
/
JS验证码.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    input[name='code'] {
        height: 27px;
        line-height: 27px;
    }

    #container {
        display: inline-block;
        width: 150px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        letter-spacing: 2px;
        font-size: 1.2em;
        font-weight: bold;
        color: #123;
        border: 1px solid #123;
        user-select: none;
    }
</style>

<body>
    <h1>验证码</h1>
    <input type="text" id="input" name="code" placeholder="请输入验证码" required />
    <div id="container"></div>
    <div>
        <button id="btn">验证</button>
    </div>
</body>
<script>
    //验证码思路
    //将需要验证的图片、文字、数字放入数组中，通过数组下标进行匹配对比
    //将随机生成的下标对应的内容通过span放入网页


    //获取DOM元素
    var input = document.getElementById("input");
    var cont = document.getElementById("container");
    var btn = document.getElementById("btn");

    //字符串数组   0 - 61
    var codelist = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
    ]

    //颜色的数组 12
    var colorlist = ['#f44336', '#009688', '#cddc39', '#03a9f4', '#9c27b0', '#5e4444', '#9ebf9f', '#ffc8c4', '#2b4754', '#b4ced9', '#835f53', '#aa677e']

    //验证码封装
    function Code() {

        //定义验证码内容 用于存放最终验证码结果
        var codeKey = "";
        var output = "";

        //生成span，将验证码展示在页面上(num为验证码位数)
        var num = 4;
        for (var i = 0; i < num; i++) {
            //生成字符串数组下标随机数 区间为0~61
            var codeNum = Math.floor(Math.random() * codelist.length);
            //生成颜色数组下标随机数 区间为0~12
            var colorNum = Math.floor(Math.random() * colorlist.length);

            //通过下标取得具体数据
            var code = codelist[codeNum];
            var color = colorlist[colorNum];

            codeKey += code;

            // var span = document.createElement('span');
            // cont.appendChild(span);
            // span.innerHTML = code;
            // span.style.color = color;

            output += `<span style="color:${color}">${code}</span>`
        }
        //将验证码存放到本地存储里面
        sessionStorage.setItem('vercode', codeKey)
        container.innerHTML = output;
    }
    Code();

    //点击验证码刷新验证码
    container.onclick = function () {
        Code();
        // 将input清空
        input.value = "";
        //将焦点设置在指定的 HTML 元素上
        input.focus();
    }

    //给btn绑定点击提交验证事件
    btn.onclick = function () {
        //trim()
        //返回一个新的字符串，并且会去掉原字符串开头和结尾的空格、回车、换行符等不可见字符
        var btnValue = input.value.trim();
        var vercode = sessionStorage.getItem("vercode");
        if (btnValue != vercode) {
            // 将input清空
            input.value = "";
            //将焦点设置在指定的 HTML 元素上
            input.focus();
            alert('验证码输入有误，请重新输入');
            return false;
        } else {
            alert('验证码正确');
            // 将input清空
            input.value = "";
            //将焦点设置在指定的 HTML 元素上
            input.focus();
            Code();
        }
    }
</script>

</html>