直接上代码
登入部分
<!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>
.zhuti {
width: 250px;
height: 200px;
border: 1px solid beige;
background-color: rgba(231, 222, 222, 0.5);
margin: 200px auto;
color: black;
border-radius: 5px;
padding: 30px 25px;
text-align: center;
}
body {
width: auto;
height: auto;
background: url(145.webp);
background-size: cover;
background-repeat: no-repeat;
}
.sub {
margin: 10px 70px;
height: 30px;
width: 50px;
}
h1 {
margin-top: 0%;
}
.mm {
margin-top: 10px;
}
a {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<div class="zhuti">
<form method="get">
<h1>登入</h1>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" class="dr_username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" class="dr_password" class="mm"></td>
</tr>
</table>
<input type="submit" value="登入" class="sub" id="dr"><br>
<a href="zc.html">还没有账号?,先注册一个</a>
</form>
</div>
<script>
var dru = document.querySelector('.dr_username');
var drp = document.querySelector('.dr_password');
var set = document.querySelector('.sub');
set.addEventListener('click', function () {
var val1=dru.value;
var val2=drp.value;
var val3=JSON.parse(window.localStorage.getItem('ipt'));
var val4=JSON.parse(window.localStorage.getItem('pw'));
if(val1==val3 && val2==val4){
window.open("https://1984453832.github.io/","_blank");
}else{
alert("用户名或者密码错误");
}
})
</script>
</body>
</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>
div{
width: 300px;
height: 260px;
margin: 220px auto;
background-color:rgba(231, 222, 222, 0.5);
text-align: center;
padding: 10px;
border: 1px solid beige;
border-radius: 5px;
}
body{
background:url(145.webp) ;
background-repeat: no-repeat;
background-size: cover;
}
.sub{
margin-top: 10px;
height: 30px;
width: 50px;
}
a{
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<h1 style="text-align: center;">注册</h1>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" class="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" class="password"></td>
</tr>
<tr>
<td>再次输入密码:</td>
<td><input type="password"></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text"></td>
</tr>
</table>
<input type="submit" value="提交" class="sub"><br>
<a href="br.html">返回登入界面</a>
</div>
<script>
var ipt=document.querySelector('.username');
var pw=document.querySelector('.password')
var set=document.querySelector('.sub');
set.addEventListener('click',function(){
var val=ipt.value;
var val1=pw.value;
localStorage.setItem('ipt',val)
localStorage.setItem('pw',val1)
alert('注册成功')
})
</script>
</body>
</html>
背景图片可自行更换。
注册时只有用户名和密码的输入框有效,其他两个没有实际功能。
注册成功后用户名和密码会保存在本地,即使关闭游览器也存在。
这只是我练手的小程序,并不完善,欢迎各位大佬评论指导