-
Notifications
You must be signed in to change notification settings - Fork 19
/
Copy pathindex.html
108 lines (93 loc) · 3.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<label for="gt">1. gt: </label>
<input class="inp" id="gt" type="text">
</div>
<br>
<div>
<label for="challenge">2. challenge: </label>
<input class="inp" id="challenge" type="text">
</div>
<br>
<div id="btn-gen" class="btn">3. 生成</div>
<br><br>
<div>
<label>4. 验证：</label>
<div id="captcha">
<div id="text">
请先生成
</div>
<div id="wait" class="show">
<div class="loading">
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
</div>
</div>
</div>
</div>
<br>
<div id="btn-result" class="btn">5. 结果</div>
<br><br>
<div>
<label for="validate">validate: </label>
<input class="inp" id="validate" type="text" readonly="readonly">
</div>
<br>
<div>
<label for="seccode">seccode: </label>
<input class="inp" id="seccode" type="text" readonly="readonly">
</div>
<br>
<script src="js/jquery.js"></script>
<script src="js/gt.js"></script>
<script>
var handler = function (captchaObj) {
captchaObj.appendTo('#captcha');
captchaObj.onReady(function () {
$("#wait").hide();
});
$('#btn-result').click(function () {
var result = captchaObj.getValidate();
if (!result) {
return alert('请完成验证');
}
var validate = $('#validate')[0];
var seccode = $('#seccode')[0];
validate.value = result.geetest_validate;
seccode.value = result.geetest_seccode;
});
// 更多前端接口说明请参见：http://docs.geetest.com/install/client/web-front/
};
$('#btn-gen').click(function () {
$('#text').hide();
$('#wait').show();
var gt = $('#gt')[0].value;
var challenge = $('#challenge')[0].value;
// 调用 initGeetest 进行初始化
// 参数1：配置参数
// 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
initGeetest({
// 以下 4 个配置参数为必须，不能缺少
gt: gt,
challenge: challenge,
offline: false, // 表示用户后台检测极验服务器是否宕机
new_captcha: true, // 用于宕机时表示是新验证码的宕机
product: "popup", // 产品形式，包括：float，popup
width: "300px",
https: true
// 更多前端配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
}, handler);
});
</script>
</body>
</html>