一个简单的HTML5后台登陆界面及登录实现
可以实现固定管理员账号登陆的html登陆界面
1.实现效果图
2.代码实现
（包括HTML，css，js）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
form
{
width:100%;
height:700px;
margin-top: 0px;
background:#008B8B;
}
div
{
display:inline-block;
padding-top: 80px;
padding-right: 20px;
}
h2
{
font-family: "微软雅黑";
font-size: 40px;
color:black;
}
#log
{
color:blue;
}
</style>
</head>
<body>
<form name="login">
<center>
<div>
<h2>
合作岛后天管理系统
</h2>
<p>
用户名：<input type="text" name="" id="0" value="" />
</p>
<p>
密 码:<input type="password" name="" id="1" value="" />
</p>
<p>
<input type="button" name="" id="btn" value="登陆" />
</p>
<p>
请输入管理员账号
</p>
</div>
</center>
</form>
</body>
<script type="text/javascript">
var btn = document.getElementById("btn");
var aInputs = document.getElementsByTagName('input')
btn.onclick = function(){
;
if (aInputs[0].value == "admin" && aInputs[1].value == "010615") {
alert('登陆成功！');
window.location.href='zjm.html';
} else {
alert('请填写正确的账号密码！');
}
}
</script>
</html>
其中的 图1 代码是登陆功能的实现
图1：
<script type="text/javascript">
var btn = document.getElementById("btn");
var aInputs = document.getElementsByTagName('input')
btn.onclick = function(){
;
if (aInputs[0].value == "admin" && aInputs[1].value == "010615") {
alert('登陆成功！');
window.location.href='zjm.html';
} else {
alert('请填写正确的账号密码！');
}
}
</script>
更多推荐
一个简单的HTML5后台登陆界面及登录实现
发布评论