随机验证码

效果展示

html

<div>
    <div class="str-block">

    </div>
    <span class="look">看不清楚...</span>
</div>
<input type="text" id="txt"/>
<button id="btn">验证</button>

css

    <style>
        .str-block {
            width: 200px;
            height: 50px;
            line-height: 50px;
            border: 1px solid black;
            display: inline-block;
            background-image: url("./img/bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            text-align: center;
            overflow: hidden;
        }

        .str-block > span {
            display: inline-block;
        }

        .look {
            display: inline-block;
            color: blue;
            font-size: 13px;
            cursor: pointer;
        }
    </style>

js

<script>
    /*
     * 总共6位
     * 随机生成数字0-9
     * */
    var str = "";
    function showchar() {
        str = "";
        var ele = "";
        for (var i = 0; i < 6; i++) {
            var gai = Math.random();
            if (gai <= 0.25) {
                ele += randomnumber();
            }
            else if (gai > 0.25 && gai <= 0.5) {
                ele += randomsmallchar();
            }
            else if (gai > 0.5 && gai <= 0.75) {
                ele += randombigchar();
            }
            else {
                ele += randomhan();
            }
        }
        return ele;
    }
    //生成随机颜色
    function randomColor() {
        var c = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
        var s = "";
        for (var i = 0; i < 6; i++) {
            s += c[Math.floor(Math.random() * c.length)];
        }
        return "#" + s;
    }
    function randomnumber() {
        var s = Math.floor(Math.random() * 10);
        str += s;
        //生成大小
        var font = Math.floor(Math.random() * 25 + 15);
        var color = randomColor();
        var marleft = Math.floor(Math.random() * 3 + 5);
        var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
        return "<span style='transform:rotatez(" + angle + "deg);margin:0 " + marleft + "px;font-size: " + font + "px; color:" + color + ";'>" + s + "</span>";
    }
    function randomsmallchar() {
        var s = Math.floor(Math.random() * 26 + 97);
        str += String.fromCharCode(s);
        var font = Math.floor(Math.random() * 25 + 15);
        var color = randomColor();
        var marleft = Math.floor(Math.random() * 3 + 5);
        var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
        return "<span style='transform:rotatez(" + angle + "deg);margin:0 " + marleft + "px;font-size: " + font + "px; color:" + color + ";'>" + String.fromCharCode(s) + "</span>";

    }
    function randombigchar() {
        var s = Math.floor(Math.random() * 26 + 97);
        str += String.fromCharCode(s).toUpperCase();
        var font = Math.floor(Math.random() * 25 + 15);
        var color = randomColor();
        var marleft = Math.floor(Math.random() * 3 + 5);
        var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
        return "<span style='transform:rotatez(" + angle + "deg);margin:0 " + marleft + "px;font-size: " + font + "px; color:" + color + ";'>" + String.fromCharCode(s).toUpperCase() + "</span>";

    }
    function randomhan() {
        var string = "中国语言文字网将由教育部语言文字应用研究所主办和运行管理,新网站访问入口更改";
        var s = string.charAt(Math.floor(Math.random() * string.length));
        str += s;
        var font = Math.floor(Math.random() * 20 + 15);
        var color = randomColor();
        var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
        return "<span style='transform:rotatez(" + angle + "deg);font-size: " + font + "px; color:" + color + ";'>" + s + "</span>";

    }
    window.onload = function () {

        var sblock = document.getElementsByClassName("str-block")[0];
        var look = document.getElementsByClassName("look")[0];
        var btn = document.getElementById("btn");
        var txt = document.getElementById("txt");

        sblock.innerHTML = showchar();
        look.onclick = function () {
            sblock.innerHTML = showchar();
        }
        btn.onclick = function () {
            var user = txt.value;
            if (user.toLowerCase() == str.toLowerCase()) {
                alert("验证成功！")
            }
            else {
                alert("验证失败！");
                sblock.innerHTML = showchar();
                txt.value = "";
            }
        }
    }
</script>

来源：https://blog.csdn.net/qq_44147941/article/details/100107825