<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>登记</title>
<script src="../static/assets/js/jquery-2.0.3.min.js"></script>
<style type="text/css">
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font: 16px/20px microsft yahei;
}
.wrap {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
opacity: 0.8;
background: linear-gradient(to bottom right, #1296db, #b2e1fa);
background: -webkit-linear-gradient(to bottom right, #1296db, #b2e1fa);
}
.container {
width: 70%;
margin: 30vw auto 0;
}
.container h1 {
text-align: center;
color: #FFFFFF;
font-weight: 500;
}
.container input {
width: 100%;
display: block;
height: 10vw;
border: 0;
outline: 0;
padding: 0 3.75vw;
margin: 32px auto;
border-radius: 99999px;
-webkit-transition: all 0s ease-in 0.1ms;
-moz-transition: all 0s ease-in 0.1ms;
transition: all 0s ease-in 0.1ms;
}
button {
width: 100%;
display: block;
height: 12vw;
border: 0;
outline: 0;
padding: 6px 10px;
margin: 32px auto;
-webkit-transition: all 0s ease-in 0.1ms;
-moz-transition: all 0s ease-in 0.1ms;
transition: all 0s ease-in 0.1ms;
}
.container input[type="text"],
.container input[type="password"] {
background-color: #FFFFFF;
font-size: 4.375vw;
color: #50a3a2;
}
.container button {
font-size: 4.375vw;
letter-spacing: 2px;
color: #fff;
background-color: #0f6fff;
border-radius: 99999px;
}
/* .username:focus {
width: 400px;
}
.pwd:focus {
width: 400px;
} */
.wrap ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
}
.wrap ul li {
list-style-type: none;
display: block;
position: absolute;
bottom: -120px;
width: 15px;
height: 15px;
z-index: -8;
background-color: rgba(255, 255, 255, 0.15);
animation: square 25s infinite;
-webkit-animation: square 25s infinite;
}
.wrap ul li:nth-child(1) {
left: 0;
animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
-webkit-animation-duration: 10s;
}
.wrap ul li:nth-child(2) {
width: 40px;
height: 40px;
left: 10%;
animation-duration: 15s;
-moz-animation-duration: 15s;
-o-animation-duration: 15s;
-webkit-animation-duration: 15s;
}
.wrap ul li:nth-child(3) {
left: 20%;
width: 25px;
height: 25px;
animation-duration: 12s;
-moz-animation-duration: 12s;
-o-animation-duration: 12s;
-webkit-animation-duration: 12s;
}
.wrap ul li:nth-child(4) {
width: 50px;
height: 50px;
left: 30%;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
animation-duration: 12s;
-moz-animation-duration: 12s;
-o-animation-duration: 12s;
-webkit-animation-duration: 12s;
}
.wrap ul li:nth-child(5) {
width: 60px;
height: 60px;
left: 40%;
animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
-webkit-animation-duration: 10s;
}
.wrap ul li:nth-child(6) {
width: 75px;
height: 75px;
left: 50%;
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
-o-animation-delay: 7s;
animation-delay: 7s;
}
.wrap ul li:nth-child(7) {
left: 60%;
animation-duration: 8s;
-moz-animation-duration: 8s;
-o-animation-duration: 8s;
-webkit-animation-duration: 8s;
}
.wrap ul li:nth-child(8) {
width: 90px;
height: 90px;
left: 70%;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.wrap ul li:nth-child(9) {
width: 100px;
height: 100px;
left: 80%;
animation-duration: 20s;
-moz-animation-duration: 20s;
-o-animation-duration: 20s;
-webkit-animation-duration: 20s;
}
.wrap ul li:nth-child(10) {
width: 120px;
height: 120px;
left: 90%;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
animation-duration: 30s;
-moz-animation-duration: 30s;
-o-animation-duration: 30s;
-webkit-animation-duration: 30s;
}
@keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
100% {
bottom: 400px;
transform: rotate(600deg);
-webit-transform: rotate(600deg);
-webkit-transform: translateY(-500);
transform: translateY(-500)
}
}
@-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
100% {
bottom: 400px;
transform: rotate(600deg);
-webit-transform: rotate(600deg);
-webkit-transform: translateY(-500);
transform: translateY(-500)
}
}
.upimg {
position: relative;
float: left;
width: 100%;
padding: 5vw;
margin-bottom: 32px;
display: flex;
justify-content: space-between;
border: 1px dashed #fff;
border-radius: 5vw;
}
.upimg::before {
content: "上传图片";
position: absolute;
top: -4.2vw;
font-size: 3.75vw;
color: #fff;
}
.upimg-module {
float: left;
display: block;
position: relative;
width: 26vw;
height: 26vw;
}
.upimg-module input {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
.upimg-module img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
border-radius: 4.375vw;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<h1>登记页</h1>
<input type="text" class="car_num" id="car_num" placeholder="请输入车牌号（大写）" />
<input type="text" class="car_num" id="checkPhone" placeholder="请输入手机号码" />
<div class="upimg">
<div class="upimg-module">
<img id="img1" src="upimg.png" />
<input type="file" id="file" />
</div>
<div class="upimg-module">
<img id="img2" src="upimg.png" />
<input type="file" id="fileto" />
</div>
</div>
<button class="button" onclick="add()">登记新能源汽车</button>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<input id="comid" style="display:none" th:value="${comid}">
</body>
<script>
function add() {
let car_num = $("#car_num").val();
let comid = GetQueryValue1('comid');
var creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
var xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
if (car_num.length == 7) {
if (!creg.test(car_num)) {
alert("请输入正确格式的车牌号");
return false
}
} else if (car_num.length == 8) {
if (!xreg.test(car_num)) {
alert("请输入正确格式的车牌号");
return false
}
} else {
alert("请输入正确格式的车牌号");
return false;
};
var phone = document.getElementById('checkPhone').value;
if (!(/^1[3456789]d{9}$/.test(phone))) {
alert("手机号码有误，请重填");
return false;
};
$.ajax({
type: "POST",
url: "/special/car/add",
data: {
carNum: car_num,
comid: comid
},
dataType: "json",
success: function (data) {
console.log(data);
if (data.code == 200) {
alert("登记成功");
} else {
alert(data.message);
}
}
});
};
function upimg(name, id, img) {
name.onchange = function () {
var file = document.getElementById(id);
var image = document.getElementById(img);
// var image = document.querySelector("img");
var fileData = this.files[0]; //获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
var pettern = /^image/;
console.info(fileData.type)
if (!pettern.test(fileData.type)) {
alert("图片格式不正确");
return;
}
var reader = new FileReader();
reader.readAsDataURL(fileData); //异步读取文件内容，结果用data:url的字符串形式表示
/*当读取操作成功完成时调用*/
reader.onload = function (e) {
console.log(e); //查看对象
console.log(this.result); //要的数据 这里的this指向FileReader（）对象的实例reader
image.setAttribute("src", this.result)
}
};
};
upimg(file, 'file', 'img1');
upimg(f
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
