<%--
|
Created by IntelliJ IDEA.
|
User: Dell
|
Date: 2023/12/8
|
Time: 17:37
|
To change this template use File | Settings | File Templates.
|
--%>
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<html>
|
<head>
|
<title>登录</title>
|
<link href="CSS/style.css" rel="stylesheet">
|
<style>
|
.genggai:hover{
|
color: red;
|
}
|
.form {
|
width: 290px;
|
height: 380px;
|
display: flex;
|
flex-direction: column;
|
border-radius: 15px;
|
background-color: white;
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
transition: .4s ease-in-out;
|
}
|
|
.form:hover {
|
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
|
scale: 0.99;
|
}
|
|
.heading {
|
position: relative;
|
text-align: center;
|
color: black;
|
top: 3em;
|
font-weight: bold;
|
}
|
|
.check {
|
position: relative;
|
align-self: center;
|
top: 4em;
|
}
|
|
.input {
|
position: relative;
|
width: 2.5em;
|
height: 2.5em;
|
margin: 1em;
|
border-radius: 5px;
|
border: none;
|
outline: none;
|
background-color: rgb(235, 235, 235);
|
box-shadow: inset 3px 3px 6px #d1d1d1,
|
inset -3px -3px 6px #ffffff;
|
top: 6.5em;
|
left: 1.5em;
|
padding-left: 15px;
|
transition: .4s ease-in-out;
|
}
|
|
.input:hover {
|
box-shadow: inset 0px 0px 0px #d1d1d1,
|
inset 0px 0px 0px #ffffff;
|
background-color: lightgrey;
|
}
|
|
.input:focus {
|
box-shadow: inset 0px 0px 0px #d1d1d1,
|
inset 0px 0px 0px #ffffff;
|
background-color: lightgrey;
|
}
|
|
.btn1 {
|
position: relative;
|
top: 8.5em;
|
left: 2.4em;
|
width: 17em;
|
height: 3em;
|
border-radius: 5px;
|
border: none;
|
outline: none;
|
transition: .4s ease-in-out;
|
box-shadow: 1px 1px 3px #b5b5b5,
|
-1px -1px 3px #ffffff;
|
}
|
|
.btn1:active {
|
box-shadow: inset 3px 3px 6px #b5b5b5,
|
inset -3px -3px 6px #ffffff;
|
}
|
|
.btn2 {
|
position: relative;
|
top: 9.5em;
|
left: 2.4em;
|
width: 17em;
|
height: 3em;
|
border-radius: 5px;
|
border: none;
|
outline: none;
|
transition: .4s ease-in-out;
|
box-shadow: 1px 1px 3px #b5b5b5,
|
-1px -1px 3px #ffffff;
|
}
|
|
.btn2:active {
|
box-shadow: inset 3px 3px 6px #b5b5b5,
|
inset -3px -3px 6px #ffffff;
|
}
|
</style>
|
</head>
|
<body style="overflow:hidden;">
|
<p style="padding-left: 3%;padding-top: 2%;color: white;font-size: 14px;"><img src="images/YuYan.png" style="width: 20px;text-align: left;vertical-align: middle">
|
<a href="javascript:;" style="position: relative;top: 2px" onclick="YuYan('Chinese')">Chinese</a>
|
<a href="javascript:;" style="position: relative;top: 2px" onclick="YuYan('Русский')">Русский язык</a>
|
</p>
|
<div class="loginav">
|
<div class="video" style="position: relative;"><video src="images/video.mp4" muted autoplay loop/></div>
|
<div class=""></div>
|
<div class="loginbox boxall" style="height: 420px;width: 450px;">
|
<div class="logo">
|
<h1 id="title">定位管理系统</h1>
|
<!-- <img src="images/logo.png"> -->
|
</div>
|
<a href="javascript:;" class="yonghulog" onclick="yonghu()"><div class="logintit yh" style="display: inline-block">用户登录</div></a><a class="duanxinlog" href="javascript:;" style="margin-left: 5%" onclick="duanxin()"><div class="logintit dx" style="display: inline-block;margin-left: 30px">短信登录</div></a>
|
<ul class="logininput" id="yong" style="margin-top: 10%">
|
<li>
|
<i><img src="images/user.png"></i>
|
<input class="forminput" value="" id="yhm" required type="text" placeholder="用户名">
|
</li>
|
<li>
|
<i><img src="images/password.png"></i>
|
<input class="forminput" type="password" id="pass" required value="" placeholder="密码">
|
</li>
|
<li>
|
<a href="javascript:;" onclick="login()" id="LoginDengLu" class="btn btnblock btn-lg btn-block btn-primary">登录</a>
|
</li>
|
<%-- <li style="color: white;text-align: center;position: relative;left: 5%" id="title2">推荐您使用谷歌chorme浏览器<a class="genggai" href="./NotPassWord.jsp" style="color: #ccc;font-size: 13px;position: relative;left: 10%">更改密码</a></li>--%>
|
</ul>
|
<ul class="logininput" style="position: relative;top: -67.5%;display: none" id="duan">
|
<li>
|
<i><img src="images/user.png"></i>
|
<input class="forminput" value="" id="yhm1" type="text" placeholder="请输入手机号">
|
</li>
|
<li>
|
<i><img src="images/password.png"></i>
|
<input class="forminput" type="password" id="pass1" value="" placeholder="请输入验证码">
|
</li>
|
<li>
|
<a href="javascript:;" onclick="login()" id="LoginDengLu1" style="text-align: center;" class="btn btnblock btn-lg btn-block btn-primary">登录</a>
|
</li>
|
<li>
|
<a href="javascript:;" id="yzm" style="width: 100px;height: 40px;font-size: 12px;line-height: 40px;float: right;position: relative;top: -154px;margin-right: 5px" class="btn btnblock btn-lg btn-block btn-primary" onclick="hqyzm()">获取验证码</a>
|
</li>
|
</ul>
|
<div class="boxfoot"></div>
|
</div>
|
</div>
|
<div style="width: 100%;position: fixed;top: 32%;left: 40%">
|
</div>
|
|
<canvas id='canvas'
|
style="position:fixed; width:100%; height:100%; left: 0; top: 0; opacity: .3; pointer-events: none;"></canvas>
|
<script src="JS/translate.js"></script>
|
<script>
|
|
var canvas = document.querySelector('canvas');
|
var ctx = canvas.getContext('2d');
|
var w = window.innerWidth;//获取屏幕宽高
|
var h = window.innerHeight * 2 / 2;
|
canvas.width = w;//将屏幕宽高赋值给canvas
|
canvas.height = h;
|
// canvas.style.cssText += `;width:${w}px;height:${h}px;`;
|
var dots = [];
|
var minScale = 1;//设置圆点的最小缩放
|
var maxScale = 3;//设置圆点的最大缩放
|
var bei = 1;
|
for (var i = 0; i < 300; i += 1) { //设置白圆点的个数
|
dots.push(new Dot())
|
}
|
|
render = () => {
|
ctx.clearRect(0, 0, w, h);
|
ctx.fillStyle = 'rgba(26,94,199,.6)';
|
ctx.fillRect(0, 0, w, h);//描绘底层蓝色背景
|
for (var i = 0; i < dots.length; i += 1) {
|
var dot = dots[i];
|
dot.update();
|
dot.paint();
|
|
}
|
requestAnimationFrame(render)
|
}
|
render();
|
function Dot() {
|
this.radius = Math.floor(Math.random() * 3 + 2);//在选一个随机数为圆点半径
|
this.d = Math.random() * 2 * Math.PI;//在0-2π之间随机一个弧度值
|
this.rx = Math.random() * w * (Math.random() > 0.6 ? 2 / 3 : 1 / 4);// 选一个随机数，作为椭圆长轴顶点a的数值,也就是椭圆中心的x轴坐标，此处的x,y,是相对于椭圆圆心为中心点建立的直角坐标系。
|
this.ry = Math.random() * h - h / 2;//选一个随机数作为椭圆短轴顶点b的数值，也就是椭圆中心的y轴坐标，此处的x,y,是相对于椭圆圆心为中心点建立的直角坐标系。这两个值可以根据自已需求来定。
|
this.x = Math.cos(this.d) * this.rx + w / 2;
|
this.y = Math.sin(this.d) * this.ry + h / 2;//根据椭圆x,y求值公式，x=a*cosα，y=a*sinα.求出圆点在椭圆上的x,y轴坐标.后面加w/2,h/2只是为了居中显示。此处的x,y是相对于canvas建立的直角坐标系的，按canvas约定，其中心点（0,0）点在左上角
|
this.z = (Math.pow(Math.pow(this.rx, 2) + Math.pow(this.ry, 2), 0.5) / Math.pow(Math.pow(w / 2, 2) + Math.pow(h / 2, 2), 0.5))//求白色圆点离椭圆中心点的距离，可视为一个点到圆心的距离，用x平方+y平方=c平方求得。此处的x,y,是相对于椭圆圆心为中心点建立的直角坐标系。此处Z值只是一个比值
|
this.scale = (Math.cos(this.d) + 1) * (maxScale - minScale) / 2 + minScale;//圆点的缩放大小,根据余弦函数公式y=cosα.标准的余弦函数最大值和最小值分别为1，-1.这里要自行设置最大值和最小值，所以要进行改写
|
// this.speed = Math.random() * 0.0005 + 0.0005;
|
this.speed = Math.random() * 0.0004 + 0.0004;//圆点运动的速度
|
this.alpha = this.scale / maxScale * 0.3 + 0.1;//圆点运动的透明度
|
this.count = 0;
|
this.paint = () => {
|
ctx.fillStyle = 'rgba(0,130,255,' + this.alpha + ')';
|
ctx.beginPath();
|
ctx.arc(this.x, this.y, this.radius * this.scale * this.z, 0, Math.PI * 2);
|
ctx.fill();
|
}
|
this.update = () => {
|
this.count += 0.01;
|
if (Math.floor(this.count) % 12 === 0 && Math.floor(this.count) != 0) {
|
this.d += 0.008;
|
if (this.count > Math.floor(this.count) + 0.5) {
|
this.d -= 0.008;
|
}
|
}
|
|
|
this.x = Math.sin(this.d) * this.rx + w / 2;
|
this.y = Math.cos(this.d) * this.ry + h / 2;
|
this.d -= this.speed;//通过改变它的弧度值来改变圆点在椭圆中运动
|
this.scale = (Math.cos(this.d) + 1) * (maxScale - minScale) / 2 + minScale;
|
this.alpha = this.scale / maxScale * 0.3 + 0.1;
|
}
|
}
|
|
</script>
|
</body>
|
<script src="/hxzkuwb/JS/layui.js"></script>
|
<script src="/hxzkuwb/JS/layer.js"></script>
|
<script src="HouTai/Js/jquery-3.5.1.js"></script>
|
<script>
|
var yzms = "";
|
var LoginNum = 0;
|
|
function login(){
|
var yanzheng1 = $("#yhm").val();
|
var yanzheng2 = $("#yhm1").val();
|
var loginYanZheng = "username="+yanzheng1+"&phone="+yanzheng2
|
$.ajax({
|
url: "/hxzkuwb/findUserAndPhone",
|
type: "POST",
|
data: loginYanZheng,
|
async: false,
|
success: function(data) {
|
LoginNum = data.yanzheng;
|
localStorage.setItem("loginNum",data.yanzheng)
|
}
|
});
|
|
var opacityValue = $("#yong").css("opacity");
|
if(opacityValue == 1){
|
var yhm = $("#yhm").val();
|
var pass = $("#pass").val();
|
if(yhm == "" || yhm == null ){
|
layer.msg(language1)
|
if (sessionStorage.getItem("YuYan") == "English"){
|
translate.execute()
|
}
|
}else{
|
if(pass == "" || pass == null){
|
layer.msg(language2)
|
if (sessionStorage.getItem("YuYan") == "English"){
|
translate.execute()
|
}
|
}else{
|
if (LoginNum == 5){
|
layer.msg('language3')
|
if (sessionStorage.getItem("YuYan") == "English"){
|
translate.execute()
|
}
|
}else{
|
if (localStorage.getItem("loginNum") >= 3){
|
layer.msg(language4)
|
if (sessionStorage.getItem("YuYan") == "English"){
|
translate.execute()
|
}
|
}else{
|
//判断用户名和密码是否正确
|
var data = "username="+yhm+"&password="+pass
|
$.post("/hxzkuwb/login",data,function (data){
|
if(data == null || data == ""){
|
layer.msg(language5)
|
if (sessionStorage.getItem("YuYan") == "English"){
|
translate.execute()
|
}
|
LoginNum = parseInt(LoginNum)+parseInt(1);
|
localStorage.setItem("loginNum",LoginNum)
|
var des = "username="+yhm+"&yanzheng="+LoginNum
|
$.get("/hxzkuwb/upUserJiaYanZheng",des,function (data){
|
|
})
|
}else{
|
sessionStorage.setItem("AppliCationPhone",data.phone)
|
var times = getDaysDiff(getCurrentDateTime(),data.time)
|
if (times+1 >=180){
|
layer.msg(language6)
|
if (sessionStorage.getItem("YuYan") == "English"){
|
translate.execute()
|
}
|
}else{
|
layer.msg(language7)
|
if (sessionStorage.getItem("YuYan") == "English"){
|
translate.execute()
|
}
|
localStorage.setItem("loginNum",0)
|
sessionStorage.setItem("username",data.username)
|
localStorage.setItem("username",data.username)
|
$.ajax({
|
url: '/hxzkuwb/addLoginLog',
|
type: 'GET',
|
async: false,
|
data: {
|
name:yhm,
|
loginfs:language8
|
},
|
success: function(data) {
|
|
},
|
error: function(xhr, status, error) {
|
console.error(status + ': ' + error);
|
}
|
});
|
setTimeout(function (){
|
var userAgent = navigator.userAgent;
|
if(userAgent.match(/Mobile/i)){
|
window.location='/hxzkuwb/Home/AppHome.jsp'
|
} else {
|
window.location='/hxzkuwb/Home/Mars3dMap.jsp'
|
}
|
|
},500)
|
}
|
}
|
})
|
}
|
}
|
}
|
}
|
}else{
|
var yhm = $("#yhm1").val();
|
var pass = $("#pass1").val();
|
if(yhm == "" || yhm == null ){
|
layer.msg(language9)
|
if (sessionStorage.getItem("YuYan") == "English"){
|
translate.execute()
|
}
|
}else{
|
if(yhm.length == 11){
|
if(pass == "" || pass == null){
|
layer.msg(language10)
|
if (sessionStorage.getItem("YuYan") == "English"){
|
translate.execute()
|
}
|
}else{
|
//判断验证码和手机号是否正确;
|
if (LoginNum == 5){
|
layer.msg(language3)
|
if (sessionStorage.getItem("YuYan") == "English"){
|
translate.execute()
|
}
|
}else{
|
var exits = $("#pass1").val();
|
if(yzms == exits) {
|
var data = "phone="+yhm
|
$.post("/hxzkuwb/login",data,function (data){
|
if (data.phone == yhm){
|
sessionStorage.setItem("ApplicationPhone",data.phone)
|
localStorage.setItem("loginNum",0)
|
layer.msg(language7)
|
if (sessionStorage.getItem("YuYan") == "English"){
|
translate.execute()
|
}
|
translate.execute()
|
sessionStorage.setItem("username",data.username)
|
localStorage.setItem("username",data.username)
|
$.ajax({
|
url: '/hxzkuwb/addLoginLog',
|
type: 'GET',
|
async: false,
|
data: {
|
name:data.username,
|
loginfs:language11
|
},
|
success: function(data) {
|
|
},
|
error: function(xhr, status, error) {
|
console.error(status + ': ' + error);
|
}
|
});
|
setTimeout(function (){
|
window.location='/hxzkuwb/Home/Home/Mars3dMap.jsp'
|
},500)
|
}
|
})
|
}else{
|
if (localStorage.getItem("loginNum") == 5){
|
layer.msg(language12)
|
if (sessionStorage.getItem("YuYan") == "English"){
|
translate.execute()
|
}
|
}else{
|
LoginNum = parseInt(localStorage.getItem("loginNum")) +1;
|
localStorage.setItem("loginNum",LoginNum)
|
layer.msg(language13)
|
if (sessionStorage.getItem("YuYan") == "English"){
|
translate.execute()
|
}
|
}
|
|
}
|
}
|
}
|
}else{
|
layer.msg(language14)
|
}
|
}
|
}
|
}
|
$(".yh").css("text-decoration","underline")
|
function duanxin(){
|
$("#yong").animate({opacity: 0}, 1000);
|
$("#duan").fadeIn(1000)
|
$(".dx").css("text-decoration","underline")
|
$(".yh").css("text-decoration","none")
|
}
|
function yonghu(){
|
$("#duan").fadeOut(1000)
|
$("#yong").animate({opacity: 1}, 1000);
|
$(".yh").css("text-decoration","underline")
|
$(".dx").css("text-decoration","none")
|
}
|
function hqyzm(){
|
var phone = $("#yhm1").val();
|
if(phone == "" || phone == null){
|
if (localStorage.getItem("languages") == "Русский"){
|
layer.msg(language15)
|
}
|
layer.msg(language15)
|
}else{
|
var data ="phone="+phone
|
$.get("/hxzkuwb/findPhoneUser",data,function (data){
|
if (data == "" || data.length == 0){
|
layer.msg(language16)
|
}else{
|
//发送验证码
|
var yzm = generateRandomCode();
|
var yzmpd = "";
|
var data = "phone="+phone+"&randomNumber="+yzm;
|
$.ajax({
|
url: "/hxzkuwb/sms",
|
data: data,
|
async: false,
|
success: function (data) {
|
// 处理返回的数据
|
yzms = data;
|
|
}
|
});
|
startCountdown(60)
|
}
|
|
})
|
|
}
|
}
|
function startCountdown(seconds) {
|
var btn = document.getElementById('yzm');
|
btn.disabled = true;
|
var count = seconds;
|
btn.textContent = count + language17;
|
var timer = setInterval(function() {
|
count--;
|
if (count <= 0) {
|
clearInterval(timer);
|
btn.textContent = language18;
|
btn.disabled = false;
|
} else {
|
btn.textContent = count + language17;
|
}
|
}, 1000);
|
}
|
function generateRandomCode() {
|
var code = "";
|
var possible = "0123456789"; // 可选的字符集合
|
|
for (var i = 0; i < 4; i++) {
|
// 从字符集合中随机选择一个字符，并添加到验证码中
|
code += possible.charAt(Math.floor(Math.random() * possible.length));
|
}
|
|
return code;
|
}
|
|
function getDaysDiff(date1, date2) {
|
const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
|
|
const firstDate = new Date(date1);
|
const secondDate = new Date(date2);
|
|
const diffDays = Math.round(Math.abs((firstDate - secondDate) / oneDay));
|
|
return diffDays;
|
}
|
function getCurrentDateTime() {
|
var now = new Date();
|
var year = now.getFullYear();
|
var month = String(now.getMonth() + 1).padStart(2, '0');
|
var day = String(now.getDate()).padStart(2, '0');
|
var hours = String(now.getHours()).padStart(2, '0');
|
var minutes = String(now.getMinutes()).padStart(2, '0');
|
|
var currentDateTime = year+"-"+month+"-"+day+" "+hours+":"+minutes;
|
return currentDateTime;
|
}
|
|
function YuYan(text){
|
if (text == "Русский"){
|
//使用俄语
|
var data = "languages=2"
|
$.post("/hxzkuwb/UpSetting",data,function (data){
|
layer.msg('Переключиться на русский')
|
setTimeout(function (){
|
location.reload();
|
},1000)
|
})
|
}
|
if (text =="Chinese"){
|
//使用中文
|
var data = "languages=0"
|
$.post("/hxzkuwb/UpSetting",data,function (data){
|
layer.msg('切换中文语言')
|
setTimeout(function (){
|
location.reload();
|
},1000)
|
})
|
}
|
}
|
|
var languages = 0;
|
|
window.addEventListener('load', function() {
|
$.post("/hxzkuwb/FindSetting",function (data){
|
languages = data[0].languages
|
//提示信息
|
language1 ="请先输入用户名和密码后在登陆"
|
language2 ="请先输入密码后在登录"
|
language3 ="当前账号已锁定，请联系公司或管理员后在进行登录!"
|
language4 ="由于您输入密码错误大于3次为了安全您需要用短信验证登录..."
|
language5 ="当前输入的用户名密码不正确,请重新输入"
|
language6 ="密码已达到强制更换日期，请前去更换密码"
|
language7 ="登录成功!正在跳转大屏首页....!"
|
language8 ="账号密码登录!"
|
language9 ="请先输入手机号和验证码后在登录"
|
language10 ="请先输入验证码后在登录"
|
language11 ="验证码登录"
|
language12 ="您当前登录不正确次数已达到五次！该账号已锁定，请联系公司或管理员后在进行操作。"
|
language13 ="验证码不正确！请重新输入"
|
language14 ="请输入正确的11位手机号"
|
language15 ="请先输入手机号后在获取验证码"
|
language16 ="当前手机号不存在，请重新输入后在获取"
|
language17 ="秒后重新获取!"
|
language18 ="获取验证码!"
|
language19 ="账号密码登录!"
|
$("title").text("登录")
|
|
|
})
|
|
});
|
|
</script>
|
</html>
|
