<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>登陆</title> <link href="css/bootstrap.min.css" title="" rel="stylesheet" /> <link title="orange" href="css/login2.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="css/xgxt_login.css" /> <link rel="stylesheet" href="css/style2.css"> <style type="text/css"> .con { height: 100%; margin-top: 0px; } #content { height: 100%; } #canvas { display: none; } .login { top: -20%; } .margin_big{ margin-top: 100px; } </style> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/index_face.js"></script> <script type="text/javascript"> //进行验证 function CatchCode() { //实际运用可不写,测试代 , 为单击拍照按钮就获取了当前图像,有其他用途 var canvans = document.getElementById("canvas"); var video = document.getElementById("video"); var context = canvas.getContext("2d"); canvas.width = video.videoWidth; canvas.height = video.videoHeight; context.drawImage(video, 0, 0); var imgData = canvans.toDataURL(); //获取图像在前端截取22位以后的字符串作为图像数据 var imgData1 = imgData.substring(22); var data = { 'img' : imgData1 }; var dataInfo = $.parseJSON(data); $.ajax({ type : "post", url : "faceServlet", data : { "img" : imgData1, "tag" : "mouse" }, dataType : "json", success : function(data) { if (data == '1') { console.log('张张嘴验证成功'); //清除定时器 window.clearInterval(interval); voice_eye(); setTimeout("eye_yanzheng()",2000); //延迟2秒后执行 } else { console.log('张张嘴验证失败'); } }, error : function(msg) { alert("请把脸放好了"); } }); } //验证眨眨眼 function eye_yanzheng() { //实际运用可不写,测试代 , 为单击拍照按钮就获取了当前图像,有其他用途 var canvans = document.getElementById("canvas"); var video = document.getElementById("video"); var context = canvas.getContext("2d"); canvas.width = video.videoWidth; canvas.height = video.videoHeight; context.drawImage(video, 0, 0); var imgData = canvans.toDataURL(); //获取图像在前端截取22位以后的字符串作为图像数据 var imgData1 = imgData.substring(22); var data = { 'img' : imgData1 }; var dataInfo = $.parseJSON(data); $.ajax({ type : "post", url : "faceServlet", data : { "img" : imgData1, "tag" : "eye" }, dataType : "json", success : function(data) { if (data == '1') { console.log('眨眨眼验证成功'); location.href = "http://muxiongxiong.top"; } else { console.log('眨眨眼验证失败'); dingshiqi_eye(); } }, error : function(msg) { } }); } //眨眨眼的定时器 function dingshiqi_eye() { //执行定时器 var time = 500; //执行人脸判断 interval = setInterval(eye_yanzheng(), time); } </script> <script type="text/javascript" src="js/phone_pass.js"></script> <script type="text/javascript"> $(function(){ /* 密码登陆 */ $("#pass_click_login").click(function(){ //进行非空验证 var uname = $("#uname").val(); //用户名 var password = $("#password_login").val(); //密码 var upho =$("#upho").val(); //手机号 var x = $("#x_r").val(); //验证码 var yanzhengma_m = $("#yanzhengma_m").val();//验证码(填入) if(uname ==''||uname==null){ alert('用户名不能为空'); }else if(password ==''||password==null){ alert('密码不能为空'); }else if(upho ==''||upho==null){ alert('手机号不能为空'); }else if(yanzhengma_m ==''||yanzhengma_m==null){ alert('验证码不能为空'); }else if(x !==yanzhengma_m){ alert('验证码不正确'); }else{ $.ajax({ type: "post", url: "facelogin.action", data: { "password": password,"uname":uname,"tag":"pass" }, dataType: "json", success: function(data) { var dataInfo = $.parseJSON(data); if(data.resu == '1'){ alert(data.msg); location.href="many.jsp"; }else{ alert(data.msg); } }, error: function(msg){ alert("出现未知错误"); location.href="errorPage.jsp"; } }); } }); /*获取验证码*/ $("#huoqu").click(function(){ /*发送验证码 */ var x = $("#x_r").val(); var phone = $("#upho").val(); var uname =$("#uname").val(); $.ajax({ url:"getPhoneV.action", type:"post", data:{"phone":phone,"uname":uname,"x":x}, success:function(data){ } }); }); }); </script> </head> <body style="overflow: hidden;"> <div style="height:1px;"></div> <div class="login"> <header> <h1>登陆</h1> </header> <div class="sr"> <div class="con_input" style="margin-top:-100px;padding:0px;margin-left: 100px;"> <!-- 扫描 --> <div class="radar" style="width:100px;height:100px;top:145px;left:45px;border:0px;"></div> <div id="support"></div> <div id="contentHolder"> <video id="video" width="90" height="90" style="border:1px solid red;border-radius: 800px;" autoplay></video> <canvas style="border:1px solid red;border-radius: 800px;width:90px;height:90px;" id="canvas"></canvas> </div> </div> <div class="name" id="username"> <label> <i class="sublist-icon glyphicon glyphicon-user"></i> </label> <input type="text" placeholder="这里输入登录名" class="name_inp" id="uname"> <input type="hidden" value="<%=new Random().nextInt(1000000)%>" id="x_r"/> </div> <div class="name" id="pass"> <label> <i class="sublist-icon glyphicon glyphicon-pencil"></i> </label> <input type="text" placeholder="这里输入登录密码" class="name_inp" id="password_login"> </div> <div class="name" id="phone"> <label> <i class="sublist-icon glyphicon glyphicon-pencil"></i> </label> <input type="text" placeholder="这里输入手机号" class="name_inp" id="upho"> </div> <!--验证码--> <div class="name" id="yzm" style="width: 50%;float: left;"> <label> <i class="sublist-icon glyphicon glyphicon-pencil"></i> </label> <input id="yanzhengma_m" style="width: 100%;float: left;" type="text" placeholder="输入验证码" class="name_inp"> </div> <span class="msgs" style="float: left;" id="huoqu">获取短信验证码</span> <input type="button" id="snap" value="检测" class="dl" /> <br/> <input type="button" id="pass_click_login" value="检测" class="dl" /> <br/> <span style="margin-left: 100px;"><a href="#" id="pass_click">密码登陆?</a></span> <span style="margin-left: 0px;"><a href="#" id="face_click">人脸登陆?</a></span> </div> </div> </body> </html>