模拟点触式验证码验证(炒鸡简陋版)

今天突然看到刚学Java Web时，做的一个模拟验证码验证过程，没考虑安全问题，只为了功能的实现，今天将它整理一下。

首先放两张效果图 一上来就是这样啦

点击验证的话 会出来验证码框  

啊哈哈  虽然是之前做的  但是现在看着也很萌萌哒  什么？ 刷新的按钮怎么了？  它是被外星人劫走了  我没能救回来  但是效果还是杠杠的 自己脑补一个刷新按钮吧

验证成功的话 就是这样哒~

好了 现在开始上代码 = =   

后台生成随机汉字的方法~

//调用6次生成汉字的方法  生成6个汉字public void yzms(){String a="";for (int i = 0; i < 6; i++) {a+=getRandomChar()+",";}//System.out.println(a);setAjaxData(a);}         //随机汉字生成    private static char getRandomChar() {        String str = "";        int hightPos; //        int lowPos;        Random random = new Random();        hightPos = (176 + Math.abs(random.nextInt(39)));        lowPos = (161 + Math.abs(random.nextInt(93)));        byte[] b = new byte[2];        b[0] = (Integer.valueOf(hightPos)).byteValue();        b[1] = (Integer.valueOf(lowPos)).byteValue();        try {            str = new String(b, "GBK");        } catch (UnsupportedEncodingException e) {            e.printStackTrace();            System.out.println("错误");        }        return str.charAt(0);    }

js方法  

var qj="";//需要依次点击的3个字var k="";//用户依次点击出来的3个字   将两者进行比较var mydate;//开始时间var mydate2;//结束时间 得出验证共用时间var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];//随机循环颜色function a(){//显示验证码框  开始验证mydate = new Date();$("#aa1").hide();//隐藏验证按钮$("#pp").text("");k="";$.ajax({url:"pro_yzms.action",//从后台获得6个随机数type:"POST",dataType:"text",success:function(json){var d=json.split(",");qj=d[0]+d[3]+d[5];$("#s1").text(d[0]);$("#s2").text(d[1]);$("#s3").text(d[2]);$("#s4").text(d[3]);$("#s5").text(d[4]);$("#s6").text(d[5]);$("#b1").text("");$("#b1").append("请依次点击："+d[0]+" "+d[3]+" "+d[5]);//追加到div上//刷新 再次调用方法$("#b1").append("<img src='${pageContext.request.contextPath}/images/Refresh.png' onclick='a();'/>");//b2 点击的验证码汉字显示 $("#b1").show();$("#b2").show();}});yz();}function yz(){k="";$("#pp").text("");$("#b3").hide();var a=35; //横纵坐标最小值var b=133;//纵坐标最大值var c=233//横坐标最大值$(".dd").show();//将6个带汉字div显示出来//随机给6个汉字横纵坐标var a1x=parseInt(Math.random()*(c-a)+a);var a1y=parseInt(Math.random()*(b-a)+a);var a2x=parseInt(Math.random()*(c-a)+a);var a2y=parseInt(Math.random()*(b-a)+a);var a3x=parseInt(Math.random()*(c-a)+a);var a3y=parseInt(Math.random()*(b-a)+a);var a4x=parseInt(Math.random()*(c-a)+a);var a4y=parseInt(Math.random()*(b-a)+a);var a5x=parseInt(Math.random()*(c-a)+a);var a5y=parseInt(Math.random()*(b-a)+a);var a6x=parseInt(Math.random()*(c-a)+a);var a6y=parseInt(Math.random()*(b-a)+a);//给随机出的6个字加样式   横纵坐标+颜色$("#a1").css({position: "absolute", left: a1x+"px", top: a1y+"px"}).css("color","#"+sje(6)).css("font-weight","900");$("#a2").css({position: "absolute", left: a2x+"px", top: a2y+"px"}).css("color","#"+sje(6));$("#a3").css({position: "absolute", left: a3x+"px", top: a3y+"px"}).css("color","#"+sje(6)).css("font-weight","900");$("#a4").css({position: "absolute", left: a4x+"px", top: a4y+"px"}).css("color","#"+sje(6));$("#a5").css({position: "absolute", left: a5x+"px", top: a5y+"px"}).css("color","#"+sje(6)).css("font-weight","900");$("#a6").css({position: "absolute", left: a6x+"px", top: a6y+"px"}).css("color","#"+sje(6));}function sje(n){//循环6位英文+数字  组成颜色色号var cl="";for(var a=0;a<n;a++){cl+=chars[Math.ceil(Math.random()*16)];}return cl;}function sc(){$("#pp").text("");k="";$("#b3").hide();}function d1(){ k+=$("#s1").text();  var o=$("#s1").text(); $("#pp").append(o+" ");  okorno(); $("#b3").show(); }function d2(){ k+=$("#s2").text();  var o=$("#s2").text(); $("#pp").append(o+" ");  okorno(); $("#b3").show();}function d3(){ k+=$("#s3").text();  var o=$("#s3").text(); $("#pp").append(o+" ");  okorno(); $("#b3").show(); }function d4(){ k+=$("#s4").text();  var o=$("#s4").text(); $("#pp").append(o+" ");  okorno(); $("#b3").show(); }function d5(){ k+=$("#s5").text();  var o=$("#s5").text(); $("#pp").append(o+" ");  okorno(); $("#b3").show(); }function d6(){ k+=$("#s6").text();  var o=$("#s6").text(); $("#pp").append(o+" ");  okorno(); $("#b3").show(); }//判断 输入框有3个字时  自动验证function okorno(){if(k.length==3){if(k==qj){mydate2=new Date();k="";$(".dd").hide();$(".dd").text("");$("#b2").text("");$("#b3").hide();$("#b1").text("");$("#b1").append("验证成功！验证时间"+((mydate2-mydate)/1000)+"秒！");//验证成功自动关闭setTimeout(function(){location.reload();},1500)}else{//验证失败刷新方法  再次验证alert("验证失败！");k="";a();}}}

html

<script type="text/javascript"src="${pageContext.request.contextPath}/ui/script/jquery-1.4.2.js"> </script>   <script type="text/javascript" src="${pageContext.request.contextPath}/ui/js/yzm.js"></script>      <style>li {list-style:none;   line-height: 20px;}</style>   </head>    <body style="margin: 0px; padding: 0px;">  <div style="width: 280px; height: auto;">  <div id="a1" class="dd" style="width: 30px;   height: 30px;  display: none" onclick="d1()"> <span id="s1"> </span> </div>  <div id="a2" class="dd" style="width: 30px;   height: 30px;  display: none" onclick="d2()"> <span id="s2"> </span> </div>  <div id="a3" class="dd" style="width: 30px;   height: 30px;  display: none" onclick="d3()"> <span id="s3"> </span> </div>  <div id="a4" class="dd" style="width: 30px;   height: 30px;  display: none" onclick="d4()"> <span id="s4"> </span> </div>  <div id="a5" class="dd" style="width: 30px;   height: 30px;  display: none" onclick="d5()"> <span id="s5"> </span> </div>  <div id="a6" class="dd" style="width: 30px;   height: 30px;  display: none" onclick="d6()"> <span id="s6"> </span> </div>  <div id="b1" style="border: 1px black solid; height: 150px; width: 249px; display: none; background-image: url('${pageContext.request.contextPath}/images/22.jpg'); ">    </div>    <div id="b2" style="border: 1px black solid; height: 30px; width: 249px; display: none; background-color:#B5E51D; ">    <span id="pp" style="font-weight: 900; "></span>       <div id="b3" style="float: right; display: none"><img src="${pageContext.request.contextPath}/images/xx.png" onclick="sc();"/></div>    </div>     </div>     <a id="aa1" onclick="a()"; style="color: blue; text-decoration:underline;" >验证</a>     <a id="aa2" style="display: none" onclick="a()" >换一个</a>  </body></html>

就是这样的咯  萌萌哒验证码就完成呐~~~~