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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码</title>
    <style>
        body {
            margin: 0;
            font-size: 14px;
            line-height: 1.5;
        }

        * {
            box-sizing: border-box;
        }

        .wrap {
            width: 960px;
            margin: 0 auto;
            background: #fff;
            display: flex;
            padding: 150px 0;
            justify-content: center;
        }

        .wrap .img {
            margin-right: 60px;
        }

        .wrap .title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 30px;
        }

        .wrap .tip {
            margin-bottom: 10px;
        }

        .wrap .input-wrap {
            display: flex;
        }

        .wrap .input-wrap .code {
            display: flex;
        }

        .wrap .input-wrap img {
            width: 142px;
            height: 45px;
            border: 0;
            margin-right: 10px;
        }

        .wrap .input-wrap .code-txt {
            line-height: 45px;
            color: #09f;
            cursor: pointer;
        }

        .wrap .input-wrap .code-txt:hover {
            color: #f60;
        }

        .wrap input {
            line-height: 43px;
            padding: 0 15px;
            border: 1px solid #CED3D9;
            outline: none;
            border-radius: 3px;
            width: 170px;
        }

        .wrap input:focus {
            border-color: #09f;
        }

        .wrap input::placeholder {
            color: #C2C6CC;
        }

        .wrap .error {
            color: #e64545;
            margin-top: 5px;
            display: none;
        }

        .wrap .btn {
            line-height: 35px;
            color: #fff;
            background: #09f;
            border-radius: 3px;
            padding: 0 30px;
            display: inline-block;
            margin-top: 20px;
            cursor: pointer;
        }

        @media screen and (max-width: 768px) {
            .wrap {
                padding: 30px;
                width: 100%;
            }

            .wrap .img {
                display: none;
            }

            .wrap .title {
                font-size: 16px;
                font-weight: normal;
                margin-bottom: 20px;
            }

            .wrap .info {
                width: 100%;
            }

            .wrap .tip {
                display: none;
            }

            .wrap .input-wrap {
                display: block;
                width: 100%;
            }

            .wrap .input-wrap input {
                width: 100%;
            }

            .wrap .input-wrap .code {
                margin-top: 10px;
            }

            .wrap .btn {
                line-height: 40px;
                width: 100%;
                text-align: center;
            }
        }
    </style>
</head>

<body>
    <form id="verifyFrom" method="post" action="">
        <div class="wrap">
            <input type="hidden" id="baseUrl" name="baseUrl" value="https://www.vedeng.com/api">
            <input type="hidden" id="verifyId" name="verifyId" value="504199c2-b01a-4c35-bace-3ce7cdcf7fc9">
            <input type="hidden" id="ipAddress" name="ipAddress" value="104.167.77.90">
            <input type="hidden" id="appId" name="appId" value="nodejs-vedeng-pc">
            <div class="img">
                <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMTg1Ij48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyIDIuNjczKSI+PHBhdGggc3Ryb2tlPSIjMDlGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iNCIgZD0iTTIwOSAxNTguNjM1VjE3NmE0IDQgMCAwMS00IDRINGE0IDQgMCAwMS00LTRWMjVoMjA5djE3Ljk1Ii8+PHBhdGggc3Ryb2tlPSIjMDlGIiBzdHJva2Utd2lkdGg9IjQiIGQ9Ik00IDBoMjAxYTQgNCAwIDAxNCA0djIxaDBIMFY0YTQgNCAwIDAxNC00eiIvPjxnIHN0cm9rZT0iIzA5RiIgc3Ryb2tlLXdpZHRoPSIyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3IDYpIj48cmVjdCB3aWR0aD0iMTUwIiBoZWlnaHQ9IjEyIiB4PSI0NSIgcng9IjYiLz48Y2lyY2xlIGN4PSIyMy41IiBjeT0iNi41IiByPSIyLjUiLz48Y2lyY2xlIGN4PSIxMy41IiBjeT0iNi41IiByPSIyLjUiLz48Y2lyY2xlIGN4PSIzLjUiIGN5PSI2LjUiIHI9IjIuNSIvPjwvZz48dGV4dCBmaWxsPSIjQjVEQ0ZCIiBmb250LWZhbWlseT0iQXJpYWxNVCwgQXJpYWwiIGZvbnQtc2l6ZT0iMjIiPjx0c3BhbiB4PSIzNCIgeT0iNjciPkVSUk9SPC90c3Bhbj48L3RleHQ+PHJlY3Qgd2lkdGg9Ijc1IiBoZWlnaHQ9IjEwIiB4PSIzNCIgeT0iMTI5IiBmaWxsPSIjQUFEREZFIiByeD0iNSIvPjxyZWN0IHdpZHRoPSIxMDMiIGhlaWdodD0iNiIgeD0iMzQiIHk9IjE0NyIgZmlsbD0iI0FBRERGRSIgcng9IjMiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQ0IDU4LjE3MykiPjxlbGxpcHNlIGN4PSI1MC43NSIgY3k9IjcwIiBmaWxsPSIjRTVGNEZGIiBzdHJva2U9IiMwOUYiIHN0cm9rZS13aWR0aD0iMiIgcng9IjM1LjI1IiByeT0iNiIvPjxlbGxpcHNlIGN4PSI1MC43NSIgY3k9IjcxLjUiIHN0cm9rZT0iIzA5RiIgc3Ryb2tlLXdpZHRoPSI0IiByeD0iNTIuNSIgcnk9IjExLjUiLz48cGF0aCBzdHJva2U9IiMwOUYiIHN0cm9rZS13aWR0aD0iNCIgZD0iTTgzLjc1IDMwLjA0MWEyLjk5IDIuOTkgMCAwMTIuMTIxLjg4IDIuOTkgMi45OSAwIDAxLjg3OSAyLjEyaDB2Ny43NWMwIDMuMDItMS4xOTUgNS43NjctMy4xNDQgNy43ODdhMTEuMTgyIDExLjE4MiAwIDAxLTYuNTk4IDMuMzNsLS4yNTguMDNWMzAuMDQxeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0yOS41IDIxLjc1aDQ1YTQgNCAwIDAxNCA0djI5YzAgOC44MzctNy4xNjMgMTYtMTYgMTZoLTIxYy04LjgzNyAwLTE2LTcuMTYzLTE2LTE2di0yOWE0IDQgMCAwMTQtNHoiLz48cGF0aCBmaWxsPSIjRTVGNEZGIiBkPSJNMjUuNjc5IDI0LjI1aDQ1djI3YzAgNi4wNzUtNC45MjUgMTEtMTEgMTFoLTE4Yy04LjgzNyAwLTE2LTcuMTYzLTE2LTE2di0yMnoiLz48cGF0aCBzdHJva2U9IiMwOUYiIHN0cm9rZS13aWR0aD0iNCIgZD0iTTc1LjUgMjMuNzVjLjU1MiAwIDEuMDUyLjIyNCAxLjQxNC41ODYuMzYyLjM2Mi41ODYuODYyLjU4NiAxLjQxNGgwdjI5YzAgMy44NjYtMS41NjcgNy4zNjYtNC4xIDkuOWExMy45NTYgMTMuOTU2IDAgMDEtOS45IDQuMWgwLTI0YTEzLjk1NiAxMy45NTYgMCAwMS05LjktNC4xIDEzLjk1NiAxMy45NTYgMCAwMS00LjEtOS45aDB2LTI5YzAtLjU1Mi4yMjQtMS4wNTIuNTg2LTEuNDE0YTEuOTk0IDEuOTk0IDAgMDExLjQxNC0uNTg2aDB6Ii8+PHBhdGggZmlsbD0iIzA5RiIgZD0iTTM2LjUgMy41QTIuNSAyLjUgMCAwMTM5IDZ2MTBhMi41IDIuNSAwIDExLTUgMFY2YTIuNSAyLjUgMCAwMTIuNS0yLjV6bTI3LjUgMEEyLjUgMi41IDAgMDE2Ni41IDZ2MTBhMi41IDIuNSAwIDExLTUgMFY2QTIuNSAyLjUgMCAwMTY0IDMuNXpNNTAuMjUgMGEyLjUgMi41IDAgMDEyLjUgMi41VjE2YTIuNSAyLjUgMCAxMS01IDBWMi41YTIuNSAyLjUgMCAwMTIuNS0yLjV6Ii8+PC9nPjxwYXRoIGZpbGw9IiMwOUYiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTQ4LjgzIDExMC42NzhsLTguMzI3IDkuMjg1YTEuMTQ0IDEuMTQ0IDAgMDEtMS45NTItLjgxVjkwLjE4M2ExLjE0NCAxLjE0NCAwIDAxMS45MTMtLjg0N2wyMS4yOTIgMTkuMzU3YTEuMTQ0IDEuMTQ0IDAgMDEtLjY4MSAxLjk4Nkg0OC44M3oiLz48ZyBzdHJva2U9IiMwOUYiIHN0cm9rZS13aWR0aD0iMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDguNSA4Mi42NzMpIj48Y2lyY2xlIGN4PSI3Ljc5IiBjeT0iNy43OSIgcj0iNi43OSIvPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIGQ9Ik00IDExLjY5MWw3LjQyOS03LjQyOCIvPjwvZz48L2c+PC9zdmc+" alt="">
            </div>
            <div class="info">
                <div class="title">访问过于频繁，休息一会吧</div>
                <div class="tip">请输入验证码</div>
                <div class="input-wrap">
                    <div class="input">
                        <input type="text" id="result" name="result" placeholder="请输入验证码">
                        <div class="error" id="error">验证码错误</div>
                    </div>
                    <div class="code">
                        <img src="data:image/jpeg;base64,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" id="verifyImg" onclick="refresh()">
                        <div class="code-txt" onclick="refresh()">换一张</div>
                    </div>
                </div>
                <div class="btn" id="submit" onclick="validate()">提交</div>
            </div>
        </div>
    </form>
    <script>
        function getXhr() {
            var xhr = null;
            try {
                xhr = new XMLHttpRequest();
            } catch (e) {
                try {
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
            return xhr;
        }

        function refresh() {
            var xhr = getXhr();
            var verifyId = document.getElementById("verifyId").value;
            var baseUrl = document.getElementById("baseUrl").value;
            var appId = document.getElementById("appId").value;
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var verifyObj = JSON.parse(xhr.responseText);
                    document.getElementById("verifyId").value = verifyObj.data.verifyId;
                    document.getElementById("verifyImg").src = verifyObj.data.verifyImgStr;
                }
            }
            xhr.open("POST", baseUrl + "/antiSpider/refreshCode?verifyId=" + verifyId + "&appId" + appId, "true");
            xhr.send();
        }

        function validate() {
            var code = document.querySelector('#result').value.trim();
            if (!code) {
                document.querySelector('#result').focus();
                return;
            }
            document.querySelector('#error').style.display = "none";
            var elements = document.getElementById("verifyFrom");
            var formData = new FormData();
            for (var i = 0; i < elements.length; i++) {
                formData.append(elements[i].name, elements[i].value);
            }
            var baseUrl = document.getElementById("baseUrl").value;
            var xhr = getXhr();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var obj = JSON.parse(xhr.responseText);
                    if (obj.success == true) {
                        window.location.reload();
                    } else {
                        document.querySelector('#error').style.display = "block";
                    }
                }
            }
            xhr.open("POST", baseUrl + "/antiSpider/validateCode", "true");
            xhr.send(formData);
        }

        // function closeThisWindows() {
        //     if (navigator.userAgent.indexOf("MSIE") > 0) {
        //         if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
        //             window.opener = null;
        //             window.close();
        //         } else {
        //             window.open('', '_top');
        //             window.top.close();
        //         }
        //     } else if (navigator.userAgent.indexOf("Firefox") > 0) {
        //         window.location.href = 'about:blank';
        //     } else if (navigator.userAgent.indexOf("AppleWebKit") > 0) {
        //         window.location.href = 'about:blank';
        //         window.close();
        //     } else {
        //         window.opener = null;
        //         window.open('', '_self', '');
        //         window.close();
        //     }
        // }


        window.onload = function () {
            document.querySelector('#result').onkeydown = function (e) {
                if (e.keyCode === 13) {
                    e.preventDefault();
                    document.querySelector('#submit').click();
                }
            }
        }


    </script>
</body>

</html>