要引入jquery的
以下是html页面
<!DOCTYPE html>
<html>
<head>
<title>后台管理登录 - Powered by {:config('hisiphp.name')}</title>
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<link rel="stylesheet" href="__PUBLIC_JS__/layui/css/layui.css" />
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: PingFangSC-Regular, PingFang SC;
}
.logindl {
position: relative;
width: 100vw;
height: 100vh;
background: #00f;
}
.logintitle {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
padding-left: 2.917rem;
width: 100%;
height: 3.865rem;
background: #ffffff;
box-shadow: 0rem 0rem 0.573rem 0rem rgba(73, 128, 255, 0.16);
}
.logintitle img {
margin-right: 0.99rem;
width: 2.156rem;
height: 2.156rem;
}
.logintitle span {
font-size: 1.042rem;
font-weight: 400;
color: #333333;
}
.centerinfo {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
background: #ffffff;
border-radius: 0.729rem;
padding: 2rem 4.479rem 1.546rem 4.479rem;
}
.centerinfo #tab_bar ul {
display: flex;
justify-content: space-between;
padding: 0 2.042rem;
}
.centerinfo #tab_bar ul li {
list-style: none;
font-size: 1.15rem;
font-weight: 500;
color: #666666;
}
#tab1_content,
#tab2_content {
margin: 2.2rem -1rem 0 -1rem;
}
#tab1_content .phonenum input,
#tab2_content .zhlogin input,
#tab2_content .pwlogin input {
border-radius: 2.604rem;
border: 0.052rem solid #afafaf;
padding: 0.842rem 1.467rem;
width: 19rem;
height: 1.279rem;
font-size: 1.042rem;
font-weight: 400;
color: #666666;
}
#tab1_content .yzm,
#tab2_content .yzmlogin {
display: flex;
align-items: center;
margin-top: 1.2rem;
}
#tab1_content .yzm #yzm {
border-radius: 2.604rem;
border: 0.052rem solid #afafaf;
padding: 0.842rem 1.467rem;
width: 11rem;
height: 1.279rem;
margin-right: 1.363rem;
font-size: 1.042rem;
font-weight: 400;
color: #666666;
}
#tab1_content .yzm #fsyzm {
font-size: 1.042rem;
font-weight: 400;
color: #4980ff;
background: none;
border: none;
}
#tab2_content .yzmlogin {
width: 22.5rem;
display: flex;
align-items: center;
}
#tab2_content .yzmlogin input {
border-radius: 2.604rem;
border: 0.052rem solid #afafaf;
padding: 0.842rem 1.467rem;
width: 9.66rem;
height: 1.279rem;
margin-right: 1.863rem;
font-size: 1.042rem;
font-weight: 400;
color: #666666;
}
#tab2_content .yzmlogin div {
width: 7rem;
height: 2.7rem;
background: #000;
}
.dlbtn,
.btnlogin {
margin-top: 2.438rem;
width: 22rem;
height: 3.2rem;
background: #4980ff;
border-radius: 2.771rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.15rem;
font-weight: 500;
color: #ffffff;
}
#tab2_content .zhlogin,
#tab2_content .pwlogin {
margin-top: 1.2rem;
}
</style>
</head>
<body>
<div class="logindl">
<div class="logintitle">
<img src="./logo.png" alt="" />
<span>心耘后台管理中心</span>
</div>
<div class="centerinfo">
<div id="tab_bar">
<ul>
<li id="tab1" onclick="myclick(1)" style="color: #407efd">
手机号登录
</li>
<li id="tab2" onclick="myclick(2)">账号登录</li>
</ul>
</div>
<div class="tab_css" id="tab1_content" style="display: block">
<div class="phonenum">
<input type="number" name="" id="" placeholder="手机号" />
</div>
<div class="yzm">
<input type="text" name="" id="yzm" placeholder="验证码" />
<input
type="button"
name=""
id="fsyzm"
onclick="sendCode(this)"
value="发送验证码"
/>
</div>
<div class="dlbtn">登录</div>
</div>
<div class="tab_css" id="tab2_content" style="display: none">
<div class="zhlogin">
<input type="text" name="" id="" placeholder="账号" />
</div>
<div class="pwlogin">
<input type="number" name="" id="" placeholder="密码" />
</div>
<div class="yzmlogin">
<input type="text" name="" id="" placeholder="验证码" />
<div>验证码</div>
</div>
<div class="btnlogin">登录</div>
</div>
</div>
</div>
<script src="./jquery.js"></script>
<script>
//手机号登录和账号登录切换
var myclick = function (v) {
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
if (li == document.getElementById("tab" + v)) {
li.style.color = "#407EFD";
} else {
li.style.color = "#666666";
}
}
var divs = document.getElementsByClassName("tab_css");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div == document.getElementById("tab" + v + "_content")) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
};
//发送验证码倒计时
var clock = "",
nums = 30;
var btn;
function sendCode(thisBtn) {
btn = thisBtn;
btn.disabled = true; //将按钮置为不可点击
btn.value = "倒计时 " + nums + " 秒";
clock = setInterval(doLoop, 1000); //一秒执行一次
}
function doLoop() {
nums--;
if (nums > 0) {
btn.value = "倒计时 " + nums + " 秒";
} else {
clearInterval(clock); //清除js定时器
btn.disabled = false;
btn.value = "发送验证码";
nums = 30; //重置时间
}
}
</script>
</body>
</html>