add index.html.

Signed-off-by: 大山 <10679024+qizitong20100501@user.noreply.gitee.com>
2026-06-02 18:43:42 +08:00 · 2023-01-17 12:12:45 +00:00 · 2023-01-17 12:12:45 +00:00 · 4929ce2eea
commit 4929ce2eea
parent 2e15a73e47
1 changed files with 121 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,121 @@
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AutoMihoyoBBS验证码</title>
    <style>
        body {
            margin: 50px 0;
            text-align: center;
            font-family: "PingFangSC-Regular", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
        }
        .inp {
            border: 1px solid #cccccc;
            border-radius: 2px;
            padding: 0 10px;
            width: 278px;
            height: 40px;
            font-size: 18px;
        }
        .btn {
            border: 1px solid #cccccc;
            border-radius: 2px;
            width: 100px;
            height: 40px;
            font-size: 16px;
            color: #666;
            cursor: pointer;
            background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
        }
        .btn:hover {
            background: white linear-gradient(0deg, #ffffff 0%, #f3f3f3 100%)
        }
        #captcha {
            width: 300px;
            display: inline-block;
        }
        .show {
            display: block;
        }
        .hide {
            display: none;
        }
        #notice {
            color: red;
        }
        label {
            vertical-align: top;
            display: inline-block;
            width: 80px;
            text-align: right;
        }
        #wait {
            text-align: left;
            color: #666;
            margin: 0;
        }
    </style>
 </head>
 <body>
 <div>
    <label>完成验证：</label>
    <div id="captcha">
        <p id="wait" class="show">正在加载验证码......</p>
    </div>
 </div>
 <!-- 引入 极验官方gt.js，使用其中提供的 initGeetest 初始化函数 -->
 <script src="https://static.geetest.com/static/js/gt.0.4.9.js"></script>
 <script>
    var handler = function (captchaObj) {
        captchaObj.appendTo("#captcha");
        captchaObj.onReady(function () {
            document.getElementById("wait").style.display='none';
        });
        console.warn(1)
        //拿到验证完的返回之后送回后端
        captchaObj.onSuccess(function (){
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "complete", true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    alert("验证完成!请返回AutoMihoyoBBS。本页面即将关闭")
                    window.close()
                }
            };
            xhr.send(JSON.stringify(captchaObj.getValidate()));
            console.warn(2)
        })
    };
    //从后端获取challenge并初始化验证码区域
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "getChallenge", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var dataObj = JSON.parse(xhr.responseText);
            initGeetest({
                gt: dataObj.gt,
                challenge: dataObj.challenge,
                new_captcha:true, 
                offline: false, 
                product: "float",
                width: "100%"
            }, handler);
        }
    };
    xhr.send("");
 </script>
 </body>
 </html>