来一个朴素的验证码小插件

Posted 2020-09-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了来一个朴素的验证码小插件相关的知识，希望对你有一定的参考价值。

随机倾斜,随机颜色的小验证码插件.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码</title>
    <style>
        #check {
            width: 100px;
            height: 20px;
        }
        #showResult{
            height: 20px;
        }
    </style>
</head>
<body>
//输入框 失去光标触发事件判断
<input id="yours" type="text" onblur="judgeCheck()">
//验证码显示区域 点击刷新验证码
<div id="check"  onclick="mycheck(this)">

</div>
//结果显示区  可以随心增添样式
<div id="showResult">

</div>
</body>
<script>
    function mycheck(obj) {
        //获取id
        var id = obj.id;
        //获取数量
        var num = obj.num || 4;
        //获取颜色
        var color = obj.color;
        var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "q", "w", "e", "r", "t", "y", "u", "i", "o",
            "p", "a", "s", "d", "f", "g", "h", "j", "k", "l", "z", "x", "c", "v", "b", "n",
            "m", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "A", "S", "D", "F", "G", "H",
            "J", "K", "L", "Z", "X", "C", "V", "B", "N", "M"];
        //可以在css中添加需要要其他样式  开始拼串
        //找到显示区
        var node = document.getElementById(id);
        var nodeStr = "";
        for (var i = 0; i < num; i++) {
            //随机数组索引
            var randomIndex = parseInt(Math.random() * 100000) % (array.length);
            //获取随机的度数 正负31度
            var randomDeg = parseInt(Math.random() * 100000) % 62 - 31;
            //获取pc端样式
            var outStyle = window.getComputedStyle(node, null);
            //计算每个的宽度
            var perWidth = parseInt(outStyle.width) / num + "px";
            //rgba(x,x,x,x) 红 绿 蓝 透明度  样式 用于随机颜色
            var r = parseInt(Math.random() * 100000) % 255;
            var g = parseInt(Math.random() * 100000) % 255;
            var b = parseInt(Math.random() * 100000) % 255;
            //不指定颜色默认随机 随机到背景色 别打我..

           var c = color || "rgba(" + r + "," + g + "," + b + ",1)";

            nodeStr += "<span class=‘randomIcon‘ style=‘display: inline-block;text-align: center" +
                ";color:" + c +
                ";transform:rotate(" + randomDeg + "deg)" +
                ";width:" + perWidth +
                ";" + "‘>" +
                array[randomIndex] + "</span>";
        }

        node.innerHTML = nodeStr;


    }
    function judgeCheck() {
        //获取验证码值 转成大写
        var icons = document.getElementsByClassName(‘randomIcon‘);
        var iconVal = ‘‘;
        for (var i=0;i<icons.length;i++) {
            iconVal += icons[i].innerHTML;
        }
        iconVal = iconVal.toUpperCase();
        //获取输入值  转成大写
        var yours = document.getElementById(‘yours‘).value;
        yours=yours.toUpperCase();

        //判断
        if (yours == iconVal) {
            document.getElementById(‘showResult‘).innerHTML = "验证通过";
            return true;
        } else {
            document.getElementById(‘showResult‘).innerHTML = "请输入正确验证码";
            return false;
        }

    }
    mycheck({
        id: "check",//id
        //默认随机 随机到背景色 别打我..
        color: ‘‘,
        //显示区域宽度 背景等请在样式中添加修改


    })

</script>
</html>

以上是关于来一个朴素的验证码小插件的主要内容，如果未能解决你的问题，请参考以下文章