js实现随机验证码

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

不归少年

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

阅读量561

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Wang_jiao_yaa/article/details/100006281

版权

javascript 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随机验证码2</title>
    <style>
       
        .yanzhengma {
            width: 240px;
            height: 50px;
            background: url("img/bg.png") no-repeat;
            background-size: 240px 50px;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            overflow: hidden;
            border: solid 1px black;
        }
        .new {
            font-size: 12px;
            color: black;
        }
        input {
            outline: none;
            width: 110px;
            height: 30px;
            background: #fff;
            padding: 0 10px;
        }
        button {
            width: 50px;
            height: 32px;
            outline: none;
            margin-left: 10px;
            background-color: #fff;
            border: solid 1px black;
        }
        .yanzhengma>span {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="yanzhengma">
        </div>
        <span class="new">看不清楚，换一张</span>
    </div>
    <input type="text" class="renew">
    <button class="btn">验证</button>
    <script>
        var str = ""; //全局变量
        function showchar() {
            str = "";
            var pass = "";
            //验证码组成部分
            for (var i = 0; i < 6; i++) {
                var gai = Math.random();
                if (gai <= 0.30) {
                    pass += randomnumber();
                } else if (gai > 0.30 && gai < 0.42) {
                    pass += randomlowcode();
                } else if (gai >= 0.42 && gai <= 0.60) {
                    pass += randomupcode();
                } else {
                    pass += randomchinese();
                }
            }
            return pass;
        }
        //验证码样式
        //颜色
        function charcolor() {
            var code = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
            var col = "";
            for (var i = 0; i < 6; i++) {
                col += code[Math.floor(Math.random() * code.length)];
            }
            return "#" + col;
        }
        function style(s) {
            //14-34 字体大小
            var font = Math.floor(Math.random() * 20 + 14);
            var colors = charcolor();
            //角度
            var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(
                Math.random() * 20 + 25);
            //外边距
            var margin = Math.floor(Math.random() * 5 + 5);
            return "<span style='font-size:" + font + "px;margin:0 " + margin + "px;color:" + colors +
                ";transform:rotatez(" + angle + "deg);'>" + s + "</span>";
        }
        function randomnumber() {
            var num = Math.floor(Math.random() * 10);
            str += num;
            return style(num);
        }
        function randomlowcode() {
            var lowcode = String.fromCharCode(Math.floor(Math.random() * 26 + 97)).toLowerCase();
            str += lowcode;
            return style(lowcode);
        }
        function randomupcode() {
            var upcode = String.fromCharCode(Math.floor(Math.random() * 26 + 97)).toUpperCase();
            str += upcode;
            return style(upcode);
        }
        function randomchinese() {
            var chinese = "道具日繁荣刚刚收到几率伴侣卡尔看快女哦欧总让人感触";
            var language = chinese.charAt(Math.floor(Math.random() * chinese.length));
            str += language;
            return style(language);
        }
        window.onload = function () {
            var update = document.getElementsByClassName("new")[0];
            var renew = document.getElementsByClassName("renew")[0];
            var btn = document.getElementsByClassName("btn")[0];
            var yanzhengma = document.getElementsByClassName("yanzhengma")[0];
            yanzhengma.innerHTML = showchar();
            update.onclick = function () {
                yanzhengma.innerHTML = showchar();
            }
            btn.onclick = function () {
                if (str.toLowerCase() == renew.value.toLowerCase()) {
                    alert("验证成功！");
                } else {
                    alert("验证失败，请重新输入！");
                    yanzhengma.innerHTML = showchar();
                    renew.value = "";
                }
            }
            //禁止选中
            document.onselectstart=function (){
                return false;
            }
        }
    </script>
</body>
</html>

总结

这个不是很难，但是浪费了我一天的时间，有两个错误，一个是style里的‘少写了一个，一个是str是个全局变量，showchar()函数里的不应该用var str了，还是不太仔细！！！！检查检查的好难，还有一个对错误的排查能力还是很差！！！

不归少年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现随机验证码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫