记录2020年写的HTML模板。(需要自己下jQuery文件)
一、底层模板
自适应屏幕大小,左右分层。
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: black;
padding: 0px;
margin: 0px;
}
.admin-main {
width: 98%;
height: 96%;
position: absolute;
top: 0px;
bottom: 0px;
/* 取消块限制 */
display: flex;
margin: 1%;
}
/* 导航栏 */
.navigation-bar {
width: 20%;
height: 100%;
background-color: #FFFFFF;
}
/* 功能模块 */
.function-module {
width: 80%;
height: 100%;
background-color: #F2F2F2;
}
</style>
</head>
<body>
<div class="admin-main">
<div class="navigation-bar"></div>
<div class="function-module"></div>
</div>
</body>
</html>
二、管理员界面
触摸事件(修改背景颜色),点击事件(打开二级目录)
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理员界面</title>
<link rel="stylesheet" href="css/a003.css">
<script src="js/Jquery.js"></script>
<script src="js/a003.js"></script>
</head>
<body>
<div class="admin-main">
<!-- 导航栏 -->
<div class="navigation-bar">
<!-- 管理员信息 -->
<div class="admin-information">
<span class="adminName">Hello Admin</span>
</div>
<div class="list-information">
<ul class="nav-ul">
<li>
<div class="nav-li-div">人事调动</div>
<ul class="div-ul">
<li>人事信息</li>
</ul>
</li>
<li>
<div class="nav-li-div">院系信息</div>
<ul class="div-ul">
<li>专业信息</li>
<li>专业申请</li>
</ul>
</li>
<li>
<div class="nav-li-div">课程安排</div>
</li>
</ul>
</div>
</div>
<div class="function-module">
<div class="module-index">
<div id="mIndex"></div>
<div class="admin-permiss">Permissions-->1</div>
</div>
</div>
</div>
</body>
</html>
css代码 a003.css
body {
background-color: black;
padding: 0px;
margin: 0px;
}
.admin-main {
width: 98%;
height: 96%;
position: absolute;
top: 0px;
bottom: 0px;
/* 取消块限制 */
display: flex;
margin: 1%;
}
/* 导航栏 */
.navigation-bar {
width: 20%;
height: 100%;
background-color: #FFFFFF;
}
.admin-information {
background-color: pink;
height: 50px;
}
.admin-information>.adminName {
background-color: ivory;
position: absolute;
padding: 10px;
top: 4px;
border-radius: 0 20px 20px 0;
}
.nav-li-div {
padding: 8px;
}
.nav-ul,
.div-ul {
list-style-type: none;
padding: 0px;
cursor: pointer;
}
.nav-ul>li {
margin: 5px;
}
.div-ul>li {
padding: 10px;
margin-left: 10px;
/* 子菜单弧度 */
border-radius: 0 20px 20px 0;
}
/* 功能模块 */
.function-module {
width: 80%;
height: 100%;
background-color: #F2F2F2;
}
.module-index {
/* 功能模块索引 */
background-color: #FFFFFF;
height: 50px;
}
#mIndex {
float: left;
position: relative;
padding: 10px;
top: 4px;
}
.admin-permiss {
/* 权限div */
float: right;
position: relative;
padding: 10px;
top: 4px;
/* 设置弧度 */
border-radius: 20px 0 0 20px;
background-color: pink;
}
js代码 a003.js
// 参数
var indexText; //功能模块索引文本变量
$(document).ready(main)
function main() {
$(".div-ul").hide();
navUl();
divUl();
listClick();
}
/* -----------导航栏子菜单事件处理函数集------------ */
function navUl() {
var navUl = $(".nav-ul").children(); //导航栏元素数组
for (var i = 0; i < navUl.length; i++) {
/* 弹出处理 */
navUlClick(navUl.eq(i));
/* 触摸处理 */
navUlHover(navUl.eq(i));
}
}
// 导航栏点击事件
function navUlClick(navUiThis) {
$(".nav-li-div", navUiThis).click(function() {
listClick($(this));
if ($(".div-ul", navUiThis).is(':hidden')) {
$(".div-ul", navUiThis).show();
} else {
$(".div-ul", navUiThis).hide();
}
indexVal($(this), 1);
});
}
// 导航栏触摸事件
function navUlHover(navUiThis) {
$(".nav-li-div", navUiThis).hover(function() {
$(this).css("background", "pink");
}, function() {
$(this).css("background", "#FFFFFF");
});
}
//子菜单处理函数
function divUl() {
var divUl = $(".div-ul").children(); //子菜单元素数组
for (var i = 0; i < divUl.length; i++) {
//触摸事件
divUlHover(divUl.eq(i));
//点击事件
divUlClick(divUl.eq(i));
}
}
//子菜单触摸事件
function divUlHover(divUlThis) {
divUlThis.hover(function() {
$(this).css("background", "pink");
}, function() {
$(this).css("background", "#FFFFFF")
})
}
//子菜单点击事件
function divUlClick(divUlThis) {
divUlThis.click(function() {
indexVal(divUlThis, 2);
})
}
/* -----------功能模块处理函数集------------ */
//索引html文本逻辑处理
function indexVal(valThis, i) {
switch (i) {
case 1:
indexText = valThis.html();
break;
case 2:
var a = valThis.parents("li").children().eq(0).html();
indexText = a + ">" + valThis.html();
break;
}
$("#mIndex").html(indexText);
}
//ul点击切换list-style-type
function listClick(listThis) {
var a = listThis.parents("li");
if (a.css("list-style-type") == "disclosure-closed") {
a.css("list-style-type", "disclosure-open");
} else {
a.css("list-style-type", "disclosure-closed");
}
}
3、注册界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/d002.css">
<script src="js/Jquery.js"></script>
<script src="js/d002.js"></script>
<!-- 时间选择模块 -->
<link rel="stylesheet" type="text/css" href="css/My97DatePicker/skin/WdatePicker.css"/>
<script type="text/javascript" src="css/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
<div class="main">
<div class="reg-title">
用 户 注 册
</div>
<div class="input-data">
<input type="text" required="" id="userName" name="userName" />
<div class="underlineN"></div>
<label>Name</label>
</div>
<div class="input-data">
<input type="text" required="" id="userPass" name="userPass" />
<div class="underlineP"></div>
<label>Password</label>
</div>
<div class="input-data">
<input type="text" required="" id="userRepeatPass" name="userRepeatPass" />
<div class="underlineP"></div>
<label>Password Repeat</label>
</div>
<div class="input-data">
<input type="text" required="" id="userPhone" name="userPhone"/>
<div class="underlineP"></div>
<label>Phone</label>
</div>
<div class="input-data">
<input type="text" required="" id="userEmail" name="userEmail"/>
<div class="underlineP"></div>
<label>Email</label>
</div>
<div class="email-yzm">
<input type="text" required="" id="yzm" name="yzm"/>
<input type="submit" id="btn-yzm" value="获取验证码" />
</div>
<div class="input-data">
<input list="source" type="text" required="" id="userSex" onfocus="blur()" name="userSex"/>
<datalist id="source">
<option>男</option>
<option>女</option>
</datalist>
<div class="underlineP"></div>
<label>Sex</label>
</div>
<div class="input-data">
<input class="Wdate" type="datetime"/>
<div class="underlineP"></div>
<label>Date of birth</label>
</div>
<div class="reg-btn">
<input class="btn-zc" type="submit" value="注册"></input>
</div>
</div>
</body>
</html>
css代码 d002.css
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
/* 设置自适应屏幕大小 */
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(-135deg, #50c8c2, #4158d0);
}
/* 标题设计 */
.reg-title {
text-align: center;
font-size: 20px;
padding-bottom: 20px;
}
/* 输入框设计 */
.main {
width: 450px;
background-color: #fff;
padding: 30px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/* 模块规格 */
.main .input-data,.email-yzm {
width: 100%;
height: 40px;
margin: 10px;
position: relative;
}
/* 二维码模块 */
.email-yzm{
text-align: center;
padding: 10px;
}
.email-yzm #yzm{
height: 30px;
width: 120px;
}
.email-yzm #btn-yzm{
padding: 5px;
}
/* 输入框规格设计 */
.main .input-data input {
width: 100%;
height: 100%;
border: none;
border-bottom: 2px solid silver;
font-size: 17px;
}
/* 动画效果 */
.input-data input:focus~label,
.input-data input:valid~label {
transform: translateY(-20px);
font-size: 15px;
color: #4158D0;
}
/* 输入框文本提醒动画 */
.main .input-data label {
position: absolute;
bottom: 10px;
left: 0;
color: grey;
pointer-events: none;
transition: all 0.3s ease;
}
/* 动画设计 */
.main .input-data .underlineN {
position: absolute;
bottom: 0px;
height: 2px;
width: 100%;
}
.input-data .underlineN::before {
background: #4158D0;
position: absolute;
content: "";
height: 100%;
width: 100%;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.input-data input:focus~.underlineN:before,
.input-data input:valid~.underlineN:before {
transform: scaleX(1);
}
.main .input-data .underlineP {
position: absolute;
bottom: 0px;
height: 2px;
width: 100%;
}
.input-data .underlineP::before {
background: #4158D0;
position: absolute;
content: "";
height: 100%;
width: 100%;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.input-data input:focus~.underlineP:before,
.input-data input:valid~.underlineP:before {
transform: scaleX(1);
}
/* 按钮设计 */
.reg-btn {
text-align: center;
}
.reg-btn input {
background: radial-gradient(circle, rgba(247, 150, 192, 1) 0%, rgba(118, 174, 241, 1) 100%);
border: none;
color: #fff;
font-family: 'Lato', sans-serif;
border-radius: 10px;
cursor: pointer;
padding: 10px 30px;
position: relative;
top: 20px;
}
/* 按钮触摸和移出 */
.reg-btn input:hover {
background: transparent;
color: #76aef1;
}
.reg-btn input::before,
.reg-btn input::after {
content: '';
position: absolute;
width: 1px;
height: 1px;
box-shadow: -1px -1px 20px 0px rgba(255, 255, 255, 1), -4px -4px 5px 0px rgba(255, 255, 255, 1), 10px 10px 20px 0px rgba(0, 0, 0, .4), 6px 6px 5px 0px rgba(0, 0, 0, .3);
transition: all 0.8s ease;
padding: 0;
}
.reg-btn input::before {
top: 0;
right: 0;
}
.reg-btn input::after {
bottom: 0;
left: 0;
}
.reg-btn input:hover::before,
.reg-btn input:hover::after {
height: 100%;
}
.reg-btn input span::before,
.reg-btn input span::after {
position: absolute;
content: '';
width: 0px;
box-shadow: -1px -1px 20px 0px rgba(255, 255, 255, 1), -4px -4px 5px 0px rgba(255, 255, 255, 1), 10px 10px 20px 0px rgba(0, 0, 0, .4), 6px 6px 5px 0px rgba(0, 0, 0, .3);
transition: all 0.8s ease;
}
.reg-btn input span::before {
top: 0;
left: 0;
}
.reg-btninput span::after {
bottom: 0;
right: 0;
}
.reg-btn input span:hover::before,
.reg-btn input span:hover::after {
width: 100%;
}
js代码 d002.js
//参数
var countdown = 60;
var code;
$(document).ready(main)
// 主函数
function main() {
yzm();
reg();
}
//发送验证码
function yzm() {
$("#btn-yzm").click(function() {
$.ajax({
url: "http://localhost:8080/ecosystem_war_exploded/tool/sendMail",
data: {
userMail: $("input[name='userEmail']").val()
},
type: "post",
dataType: "text",
async: false,
success: function(data) {
if (data == 0) {
alert("邮箱格式错误!")
} else {
code = data;
}
}
})
sendVerificationCode($("#btn-yzm"));
})
}
//倒计时
function sendVerificationCode(obj) {
if (countdown == 0) {
obj.removeAttr("disabled");
obj.val("重新获取");
countdown = 60;
return;
} else {
obj.attr('disabled', "disabled");
obj.val("重新(" + countdown + ")");
countdown--;
}
setTimeout(function() {
sendVerificationCode(obj)
}, 1000)
}
//注册
function reg() {
$(".btn-zc").click(function() {
var userName = $("#userName").val();
var userPass = $("#userPass").val();
var userRepeatPass = $("#userRepeatPass").val();
var userPhone = $("#userPhone").val();
var userEmail = $("#userEmail").val();
var yzm = $("#yzm").val();
var userSex = $("#userSex").val();
var userDate = $("#userDate").val();
if (userName.length < 8) {
alert("用户名应控制在8~15个字符!");
} else if(userName.length > 15){
alert("用户名应控制在8~15个字符!");
} else if (userPass.length < 8) {
alert("密码应控制在8~15个字符!");
} else if(userPass.length > 15){
alert("密码应控制在8~15个字符!");
} else if(userRepeatPass.length == 0){
alert("请再次输入密码!")
} else if(userRepeatPass != userPass){
alert("两份密码不一致!")
} else if (userPhone.length != 11) {
alert("正常的大陆手机号码为十一位数!")
} else if (!/^[0-9]*$/.test(userPhone)){
alert("请输入正确的电话号码!")
} else if (userEmail.length == 0) {
alert("邮箱不能为空!")
} else if (yzm != code) {
alert("验证码错误!")
} else if (userSex.length == 0) {
alert("请选择性别!")
} else if (userDate.length == 0) {
alert("请选择出生日期!")
} else {
$.ajax({
url: "http://localhost:8080/ecosystem_war_exploded/user/reg",
data: {
user_name:userName,
user_pass:userPass,
user_phone:userPhone,
user_mail:userEmail,
user_sex:userSex,
user_date_birth:userDate
},
type: "post",
dataType: "text",
async: false,
success: function(data) {
if (data == 0) {
alert("邮箱已被注册!")
} else if (data == 1) {
alert("注册成功!")
window.location.href = "http://localhost:8080/ecosystem_war_exploded/user/loginMain";
} else {
alert("注册失败!")
}
}
})
}
})
}