文章目录
网页功能介绍
这个网页是一个用户登录界面，采用邮箱、密码登录，利用了JavaScript的localstorage进行储存数据，如下
源代码
框架搭建（HTML）
我们现将基本的框架搭建出来，将登录和注册界面的文字，输入框，按钮给做出来，源代码如下
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
</head>
<body>
<div>
<h1>登录界面</h1>
<p>邮箱：</p>
<input type="text" placeholder="请输入邮箱">
<p>密码：</p>
<input type="password" placeholder="请输入密码">
<a href="register.html">没有账户，注册一个！</a>
<br>
<input type="submit" value="登录">
</div>
</body>
</html>
register.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
</head>
<body>
<div>
<h1>注册界面</h1>
<p>邮箱：</p>
<input type="text" placeholder="请输入你的邮箱">
<p>密码：</p>
<input type="password" placeholder="请输入密码">
<br>
<input type="password" placeholder="请再次输入密码">
<a href="index.html">已有账户，前往登录！</a>
<br>
<input type="submit" value="注册">
</div>
</body>
</html>
功能完善（JavaScript）
接下来我们就要对登录功能进行完善了，比如密码判断功能，注册功能。因为我们使用localstorage进行储存，所以我们要另外创建一个JS文件（index.js）。
index.js
function log_on()
{
var index_email = document.getElementById("index_email").value;
var index_password = document.getElementById("index_password").value;
if (localStorage.getItem(index_email)){
if (index_password == localStorage.getItem(index_email)){
window.location.href = "start.html";
}else{
alert("密码错误");
}
}else{
alert("没有找到账户");
}
}
function register()
{
var register_email = document.getElementById("register_email").value;
var register_password = document.getElementById("register_password").value;
var register_password2 = document.getElementById("register_password2").value;
if (register_password == register_password2){
localStorage.setItem(register_email,register_password);
alert("注册成功");
window.location.href = "index.html";
}else{
alert("第二个密码输入错误");
}
}
js代码中包含读取id，函数调用，所以我们要将HTML代码改一下。
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
<div>
<h1>登录界面</h1>
<p>邮箱：</p>
<input type="text" placeholder="请输入邮箱" id="index_email">
<p>密码：</p>
<input type="password" placeholder="请输入密码" id="index_password">
<a href="register.html">没有账户，注册一个！</a>
<br>
<input type="submit" value="登录" id="index_submit" onclick="log_on()">
</div>
</body>
</html>
register.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
<div>
<h1>注册界面</h1>
<p>邮箱：</p>
<input type="text" placeholder="请输入你的邮箱" id="register_email">
<p>密码：</p>
<input type="password" placeholder="请输入密码" id="register_password">
<br>
<input type="password" placeholder="请再次输入密码" id="register_password2">
<a href="index.html">已有账户，前往登录！</a>
<br>
<input type="submit" value="注册" id="register_submit" onclick="register()">
</div>
</body>
</html>
网页美化（CSS）
最后，我们将要对网页进行美化。不知道大家有没有注意到，我将输入框之类的内容写入了<div>标签里，目的就是为了美化。
index.html美化
首先我们先给<div>进行美化。
div{
background-color: #E1E9EF;
width: 400px;
height: 400px;
border-radius: 10px;
font-size: 18px;
padding: 120px 100px;
margin: 120px auto;
}
美化后
然后我们将<h1>登录界面</h1>居中
h1{
margin-left: 100px;
}
接下来我们再给<body>渲染上背景，这是我的背景，当然大家可以自由选择。
上代码！
body{
background :url(img23.jpg);
background-repeat:no-repeat;
background-size:100%;
}
接下来再美化一下按钮
.button{
height: 40px;
width: 300px;
border: none;
background-color: #F8F9F9;
padding: 0 35px;
font-size: 15px;
border-radius: 5px;
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;
border-radius: 5px;
color: saddlebrown;
display: inline-block;
font-size: 20px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color:#fff;
background-color: rgb(16, 185, 214);
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
margin-top: 20px;
}
.button:hover{
background-color: #1795bb;
}
.button:active{
background-color: #1795bb;
box-shadow: 0 5px #666;
transform:translateY(4px);
}
经过了一系列的美化，html文件也得大改，这是代码。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<style type="text/css">
div{
background-color: #E1E9EF;
width: 400px;
height: 400px;
border-radius: 10px;
font-size: 18px;
padding: 120px 100px;
margin: 120px auto;
}
h1{
margin-left: 100px;
}
body{
background :url(img23.jpg);
background-repeat:no-repeat;
background-size:100%;
}
.button{
height: 40px;
width: 300px;
border: none;
background-color: #F8F9F9;
padding: 0 35px;
font-size: 15px;
border-radius: 5px;
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;
border-radius: 5px;
color: saddlebrown;
display: inline-block;
font-size: 20px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color:#fff;
background-color: rgb(16, 185, 214);
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
margin-top: 20px;
}
.button:hover{
background-color: #1795bb;
}
.button:active{
background-color: #1795bb;
box-shadow: 0 5px #666;
transform:translateY(4px);
}
</style>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
<div>
<h1>登录界面</h1>
<p>邮箱：</p>
<input type="text" placeholder="请输入邮箱" id="index_email">
<p>密码：</p>
<input type="password" placeholder="请输入密码" id="index_password">
<a href="register.html">没有账户，注册一个！</a>
<br>
<input type="submit" value="登录" id="index_submit" onclick="log_on()" class="button">
</div>
</body>
</html>
register.html美化
博主懒得写这么多，干脆直接上代码吧[狗头]。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<style type="text/css">
div{
background-color: #E1E9EF;
width: 400px;
height: 400px;
border-radius: 10px;
font-size: 18px;
padding: 120px 100px;
margin: 120px auto;
}
h1{
margin-left: 100px;
}
body{
background :url(img23.jpg);
background-repeat:no-repeat;
background-size:100%;
}
.button{
height: 40px;
width: 300px;
border: none;
background-color: #F8F9F9;
padding: 0 35px;
font-size: 15px;
border-radius: 5px;
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;
border-radius: 5px;
color: saddlebrown;
display: inline-block;
font-size: 20px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color:#fff;
background-color: rgb(16, 185, 214);
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
margin-top: 20px;
}
.button:hover{
background-color: #1795bb;
}
.button:active{
background-color: #1795bb;
box-shadow: 0 5px #666;
transform:translateY(4px);
}
</style>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
<div>
<h1>注册界面</h1>
<p>邮箱：</p>
<input type="text" placeholder="请输入你的邮箱" id="register_email">
<p>密码：</p>
<input type="password" placeholder="请输入密码" id="register_password">
<br>
<input type="password" placeholder="请再次输入密码" id="register_password2">
<a href="index.html">已有账户，前往登录！</a>
<br>
<input type="submit" value="注册" id="register_submit" onclick="register()" class="button">
</div>
</body>
</html>
注意：start.html只是用来启动作的，可为空文件
完整代码
工作目录
..\
index.html
register.html
img23.html
index.html
start.html
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<style type="text/css">
div{
background-color: #E1E9EF;
width: 400px;
height: 400px;
border-radius: 10px;
font-size: 18px;
padding: 120px 100px;
margin: 120px auto;
}
h1{
margin-left: 100px;
}
body{
background :url(img23.jpg);
background-repeat:no-repeat;
background-size:100%;
}
.button{
height: 40px;
width: 300px;
border: none;
background-color: #F8F9F9;
padding: 0 35px;
font-size: 15px;
border-radius: 5px;
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;
border-radius: 5px;
color: saddlebrown;
display: inline-block;
font-size: 20px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color:#fff;
background-color: rgb(16, 185, 214);
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
margin-top: 20px;
}
.button:hover{
background-color: #1795bb;
}
.button:active{
background-color: #1795bb;
box-shadow: 0 5px #666;
transform:translateY(4px);
}
</style>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
<div>
<h1>登录界面</h1>
<p>邮箱：</p>
<input type="text" placeholder="请输入邮箱" id="index_email">
<p>密码：</p>
<input type="password" placeholder="请输入密码" id="index_password">
<a href="register.html">没有账户，注册一个！</a>
<br>
<input type="submit" value="登录" id="index_submit" onclick="log_on()" class="button">
</div>
</body>
</html>
register.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<style type="text/css">
div{
background-color: #E1E9EF;
width: 400px;
height: 400px;
border-radius: 10px;
font-size: 18px;
padding: 120px 100px;
margin: 120px auto;
}
h1{
margin-left: 100px;
}
body{
background :url(img23.jpg);
background-repeat:no-repeat;
background-size:100%;
}
.button{
height: 40px;
width: 300px;
border: none;
background-color: #F8F9F9;
padding: 0 35px;
font-size: 15px;
border-radius: 5px;
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;
border-radius: 5px;
color: saddlebrown;
display: inline-block;
font-size: 20px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color:#fff;
background-color: rgb(16, 185, 214);
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
margin-top: 20px;
}
.button:hover{
background-color: #1795bb;
}
.button:active{
background-color: #1795bb;
box-shadow: 0 5px #666;
transform:translateY(4px);
}
</style>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
<div>
<h1>注册界面</h1>
<p>邮箱：</p>
<input type="text" placeholder="请输入你的邮箱" id="register_email">
<p>密码：</p>
<input type="password" placeholder="请输入密码" id="register_password">
<br>
<input type="password" placeholder="请再次输入密码" id="register_password2">
<a href="index.html">已有账户，前往登录！</a>
<br>
<input type="submit" value="注册" id="register_submit" onclick="register()" class="button">
</div>
</body>
</html>
index.js
function log_on()
{
var index_email = document.getElementById("index_email").value;
var index_password = document.getElementById("index_password").value;
if (localStorage.getItem(index_email)){
if (index_password == localStorage.getItem(index_email)){
window.location.href = "start.html";
}else{
alert("密码错误");
}
}else{
alert("没有找到账户");
}
}
function register()
{
var register_email = document.getElementById("register_email").value;
var register_password = document.getElementById("register_password").value;
var register_password2 = document.getElementById("register_password2").value;
if (register_password == register_password2){
localStorage.setItem(register_email,register_password);
alert("注册成功");
window.location.href = "index.html";
}else{
alert("第二个密码输入错误");
}
}
感谢您的耐心观看！谢谢！
3854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
