<!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="29e6a8e7-f149-4671-8c78-e4bfbbaa25a5">
            <input type="hidden" id="ipAddress" name="ipAddress" value="156.246.15.34">
            <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>