<%@ 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>© 版权声明
本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。
THE END
暂无评论内容