2021-06-10
Posted 奶油莓果酱
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2021-06-10相关的知识，希望对你有一定的参考价值。
简单的登录界面设计
<!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>
<style>
body{
background-image: url(背景4.jpg) ;
background-repeat: no-repeat;
background-size:100%;
}
div{
width: 400px;
height: 400px;
border-radius: 30%;
background-color: rgba(0,0,0, 0.1);
position: absolute;
top: 20%;
left:38%;
font-size: x-large;
}
input{
height: 30px;
width: 200px;
}
button{
height: 40px;
width: 70px;
border-radius: 15%;
}
</style>
</head>
<body >
<center>
<div class="m1">
<br><br><br><br>
登录：<input type="text" id="un" ><br><br>
密码：<input type="password" id="pwd"><br><br>
<button id="denlu" >登录</button>
</div>
</center>
<script>
var reu =/^([a-zA-Z0-9_\\.\\-])+\\@(([a-zA-Z0-9\\-])+\\.)+([a-zA-Z0-9]{2,4})+$/g;
var rep =/^[0-9a-zA-Z]+$/g;
var denlu = document.getElementById("denlu");
denlu.onclick=function(){
var pwd =document.getElementById("pwd").value;
if(pwd.length<6){
alert("密码长度至少6位!");
}
if(!rep.test(pwd)){
alert( '密码只能是数字和字母的组合');
}
var pwdo=localStorage.getItem("password");
if(pwd!=pwdo){
alert("密码错误！");
}
else window.location.href='照片墙.html';
}
</script>
</body>
</html>
效果展示
以上是关于2021-06-10的主要内容，如果未能解决你的问题，请参考以下文章