<!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="0fd624af-b0e6-4ea6-8d45-2b9d4379d7c4">
            <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>