forked from eatage/VerificationCode
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.htm
43 lines (43 loc) · 1.83 KB
/
demo.htm
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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>C#滑块验证码</title>
<link rel="shortcut icon" href="favicon.ico">
<link href="./src/drag.css?v=1.1" rel="stylesheet" type="text/css" />
<script src="./src/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="./src/drag.js?v=1.1" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
/******************************************************
* 参数一 验证码图片规格 "300*300", "300*200", "200*100"
* 参数二 校验通过时执行的函数名
* 绑定的div width与图片宽一致 height为图片高加34像素
******************************************************/
$("#__Verification").slide("200*100", "test");
})
//校验成功执行函数
function test() {
console.log("%c\u606d\u559c\u4f60\u002c\u6821\u9a8c\u901a\u8fc7\u0021",
'background:rgba(255,249,0,.1);color:#00ff21;font-size:40px;');
}
function changespec() {
var spec = window.document.getElementById("imgspec").value;
$("#__Verification").slide(spec, "test");
}
</script>
</head>
<body style="margin:30px auto auto 30px;">
<div id="__Verification" style=" width:200px; height:134px;">
</div>
<p></p>
<p><label for="imgspec">图片规格:</label>
<select id="imgspec" onchange="changespec()">
<option value="200*100">200*100</option>
<option value="300*200">300*200</option>
<option value="300*300">300*300</option>
</select></p>
<h1 style="color:rgba(0, 255, 33, 0.7);">eatage</h1>
</body>
</html>