js--实现随机验证码

最新推荐文章于 2023-06-16 13:06:50 发布

VIP文章等待戈多的莱昂纳多

最新推荐文章于 2023-06-16 13:06:50 发布

阅读量244

点赞数 1

分类专栏：前端基础。文章标签： js

本文链接：https://blog.csdn.net/weixin_44892520/article/details/100066050

版权

在这里插入图片描述
随机验证码生成

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <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>
</head>
<body>
<div>
    <div class="str-block">

    </div>
    <span class="look">看不清楚...</span>
</div>
<input type="text" id="txt"/>
<button id="btn">验证</button>
<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 +