8 Star 29 Fork 12

zhaosheng / verifyPic

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or download
demo.html 2.07 KB
Copy Edit Web IDE Raw Blame History
zhaosheng authored 2017-09-24 21:59 . 图片点选验证码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>点选图片验证码</title>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<style>
body{margin:0;padding:0;}
#wp{position:relative;}
</style>
<body>
<div id="wp">
<img id="imgdiv" src="./verifyapi.php?t=1506254749" onclick="appendicon(event);"/>
<input type="hidden" value="" id="dots"/>
</div>
<div><p>>>>请依次点击 <span id="words"></span>完成验证>>></p></div>
<div><p style="margin-left:50px;"><button onclick="checkdot();">点击验证</button></p></div>
<div><p style="margin-left:50px;" id="prom"></p></div>
</body>
<script type="text/javascript">
//验证码图片大小文 320x100, icon大小为22x22
function appendicon(event) {
var x=event.clientX;
var y=event.clientY;
var _x = x - 11;
var _y = y - 11;
var icon = "<img src='./source/hoverclick.png' style='position:absolute;top:"+ _y +"px;left:"+ _x +"px;'/>"
$("#wp").append(icon);
var dot = $("#dots").val();
if (dot == '') {
$("#dots").val(_x +','+ (y+11)); //传icon图左下角点坐标
} else {
$("#dots").val(dot + ','+ _x +','+ (y+11));
}
}
function checkdot() {
var dots = $("#dots").val();
$.ajax({
url: './verifyapi.php?oper=checkdot',
dataType: 'json',
type: 'GET',
data: {'dots': dots},
success: function(data){
if (data.code == '0') {
$("#prom").text('验证成功,^_^!');
} else {
$("#prom").text('验证失败!');
}
},
});
}
$(function(){
$.ajax({
url: './verifyapi.php?oper=getdata',
dataType: 'json',
type: 'GET',
success: function(data){
//data = eval("("+data+")");
var words = '';
for (i=0; i<data.data.length; i++) {
words += ' "'+ data.data[i] +'" ';
}
$("#words").text(words);
},
});
});
</script>
</html>

Comment ( 0 )

Sign in for post a comment

PHP
1
https://gitee.com/yumingyzs/verifyPic.git
git@gitee.com:yumingyzs/verifyPic.git
yumingyzs
verifyPic
verifyPic
master

Search