您的位置：首页 > 编程语言 > Java开发

可爱的验证码_java

2015-07-14 09:35 330 查看

修改的内容：jquery.capcha.js

;(function( $ ){
$.fn.captcha = function(options){
var myoptions=new Array("铅笔", "剪刀", "闹钟", "红心", "笔记本");
var defaults = {
borderColor: "",
captchaDir: "captcha",
url: "captcha/captcha.php",
formId: "myForm",
text: "Verify that you are a human,<br />drag <span>scissors</span> into the circle.",
items: Array("pencil", "scissors", "clock", "heart", "note")
};

var options = $.extend(defaults, options);

$(this).html("<b class='ajax-fc-rtop'>" +
"<b class='ajax-fc-r1'></b> " +
"<b class='ajax-fc-r2'></b> " +
"<b class='ajax-fc-r3'></b> " +
"<b class='ajax-fc-r4'></b>" +
"</b>" +
"<img class='ajax-fc-border' id='ajax-fc-left' src='" + options.captchaDir + "/imgs/border-left.png' />" +
"<img class='ajax-fc-border' id='ajax-fc-right' src='" + options.captchaDir + "/imgs/border-right.png' />" +
"<div id='ajax-fc-content'>" +
"<div id='ajax-fc-left'>" +
"<p id='ajax-fc-task'>" + options.text + "</p>" +
"<ul id='ajax-fc-task'>" +
"<li class='ajax-fc-0'><img src='" + options.captchaDir + "/imgs/item-none.png' alt='' /></li>" +
"<li class='ajax-fc-1'><img src='" + options.captchaDir + "/imgs/item-none.png' alt='' /></li>" +
"<li class='ajax-fc-2'><img src='" + options.captchaDir + "/imgs/item-none.png' alt='' /></li>" +
"<li class='ajax-fc-3'><img src='" + options.captchaDir + "/imgs/item-none.png' alt='' /></li>" +
"<li class='ajax-fc-4'><img src='" + options.captchaDir + "/imgs/item-none.png' alt='' /></li>" +
"</ul>" +
"</div>" +
"<div id='ajax-fc-right'>" +
"<a target='_blank' href='http://www.webdesignbeach.com'><img id='ajax-fc-backlink' src='" + options.captchaDir + "/imgs/wdb.png' alt='Web Design Beach' /></a>" +
"<p id='ajax-fc-circle'></p>" +
"</div>" +
"</div>" +
"<div id='ajax-fc-corner-spacer'></div>" +
"<b class='ajax-fc-rbottom'>" +
"<b class='ajax-fc-r4'></b> " +
"<b class='ajax-fc-r3'></b> " +
"<b class='ajax-fc-r2'></b> " +
"<b class='ajax-fc-r1'></b>" +
"</b>");

var rand = $.ajax({ url: options.url,async: false }).responseText;
var pic = randomNumber();
$(".ajax-fc-" + rand).html( "<img src=\"" + options.captchaDir +"/imgs/item-" + options.items[pic] + ".png\" alt=\"\" />");
$("p#ajax-fc-task span").html(myoptions[pic]);
$(".ajax-fc-" + rand).addClass('ajax-fc-highlighted');
$(".ajax-fc-" + rand).draggable({ containment: '#ajax-fc-content' });
var used = Array();
for(var i=0;i<5;i++){
if(i != rand && i != pic)
{
$(".ajax-fc-" +i).html( "<img src=\"" + options.captchaDir +"/imgs/item-" + options.items[i] + ".png\" alt=\"\" />");
used[i] = options.items[i];
}
}
$(".ajax-fc-container, .ajax-fc-rtop *, .ajax-fc-rbottom *").css("background-color", options.borderColor);
$("#ajax-fc-circle").droppable({
drop: function(event, ui) {
$(".ajax-fc-" + rand).draggable("disable");
$("#" + options.formId).append("<input type=\"hidden\" style=\"display: none;\" name=\"captcha\" id=\"captchacode\" value=\"" + rand + "\">");
},
tolerance: 'touch'
});
};

})( jQuery );

function randomNumber() {
var chars = "01234";
chars += ".";
var size = 1;
var i = 1;
var ret = "";
while ( i <= size ) {
$max = chars.length-1;
$num = Math.floor(Math.random()*$max);
$temp = chars.substr($num, 1);
ret += $temp;
i++;
}
return ret;
}

自己封装的captcha jquery.captcha.extend.js

(function($){
$.fn.mycaptcha = function(options){
var _this=$(this);
var defaults = {
borderColor: "",
//验证码存放的目录
captchaDir: "captcha",
//获取随机验证码的路径
url: "/JQueryUpload/RandomCode.do",
formId: "myForm",
text: "<font size='2'>验证你不是机器人，<br />请拖动 <span>scissors</span> 进入圆圈内.</font>",
items: Array("pencil", "scissors", "clock", "heart", "note")
};

var options = $.extend(defaults, options);
$("."+_this.attr('class')).captcha(options);
};
})(jQuery);

前台的调用

<%@ page language="java" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>upload index</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

<link rel="stylesheet" type="text/css" href="captcha.css"></link>
<script type="text/javascript"  src="jquery.js"></script>
<script type="text/javascript"  src="jquery-ui.min.js"></script>
<script type="text/javascript"  src="jquery.captcha.js"></script>
<script type="text/javascript"  src="jquery.captcha.extend.js"></script>
</head>

<script type="text/javascript">
$(function() {
$(".ajax-fc-container").mycaptcha({formId: "myForm"});
});

function login()
{
var code = document.getElementById("captchacode");
if(code==null)
{
alert("请拖动提示中给的元素!");
return false;
}
document.myForm.submit();
}
</script>

<body>
<form action="/JQueryUpload/Login.do" id="myForm" name="myForm" method="post">
<div class="ajax-fc-container"></div>
<input type="button"  value="提交" onclick="login();"/>
</form>
</body>
</html>

php版本的具体参考：http://leo108.com/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航