百度logo
index.html
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>百度登录</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box{
width: %100;
height: 600px;
background-color: darkgray;
}
.tang{
width: 365px;
height: 407px;
margin: 0 auto;
position: relative;
top: 50px;
background-color: #FFFFFF;
}
.tang-title{
width: 365px;
height: 24px;
}
.tang-header{
width: 365px;
height: 32px;
}
.tang-logo{
width: 100px;
height: 32px;
float: left;
margin-left: 32.5px;
}
.tang-header-name{
width: 220px;
height: 32px;
float: right;
position: relative;
top: 10px;
}
.p-label{
width: 300px;
height: 26px;
clear: both;
margin: 0 auto;
}
.tang-content{
width: 300px;
height: 225px;
position: absolute;
top: 82px;
left: 32.5px;
}
ul {
position: relative;
top: 10px;
display: block;
list-style: none;
}
ul li {
width: 300px;
height: 60px;
margin: 0 auto;
text-align: center;
font-size: 20px;
}
ul li input {
width: 295px;
height: 38px;
}
ul li a{
display: inline-block;
margin-top: -10px;
font-size: 12px;
color: rgb(46, 130, 255);
font-family: Tahoma, Helvetica, "Microsoft Yahei", 微软雅黑, Arial, STHeiti;
text-decoration: none;
float: left;
}
#sub{
display: block;
height: 40px;
line-height: 40px;
width: 300px;
font-size: 16px;
font-weight: 800;
cursor: pointer;
color: #fff;
background: #3f89ec;
border: 0;
border-radius: 3px;
}
.tang-footer{
width: 365px;
height: 60px;
color: #2e82ff;
margin: 0 auto;
background: #f0f6ff;
position: relative;
top: 290px;
}
.tang-pass{
position: absolute;
width: 80px;
line-height: 60px;
font-size: 14px;
cursor: pointer;
}
p{
width: 300px;
height: 10px;
font-size: 5px;
margin: 0 auto;
line-height: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="tang">
<div class="tang-title"></div>
<div class="tang-header">
<div class="tang-logo"><img src="img/loginlogo.png"/></div>
<div class="tang-header-name">用户名密码登录</div>
</div>
<div class="tang-content">
<form id="myform" action="userfor.html" method="get">
<ul>
<p id="napwwarn" style="margin-bottom: 3px; color: #FF0000;"></p>
<li>
<input type="text" name="username" id="username" placeholder="用户名" form="myform" />
<p id="namewarn" style="margin-top: 3px; color: #FF0000;"></p>
</li>
<li>
<input type="password" name="password" id="password" placeholder="密码" form="myform" />
<p id="pwdwarn" style="margin-top: 3px; color: #FF0000;"></p>
</li>
<p style="font-size: 10px; font-family: arial;">
<input type="checkbox" checked="checked"/>
<label style="position: relative; top: -2px;">下次自动登录</label>
</p>
<li style="height: 10px;"></li>
<li>
<input type="button" name="btn" id="sub" value="登录" form="myform"/>
</li>
<li>
<a href="#">忘记密码?</a>
<a href="#" style="float: right;">短信快捷登录</a>
</li>
</ul>
</form>
</div>
<div class="tang-footer">
<p class="tang-pass" style="margin-left: 32.5px;">扫码登录</p>
<p class="tang-pass" style="margin-left: 275px;">立即注册</p>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function $(str) {
return document.querySelector(str);
}
var username = $("#username");
var password = $("#password");
var namewarn = $("#namewarn");
var pwdwarn = $("#pwdwarn");
var myform = $("#myform");
var reg = new RegExp("^[a-zA-Z][a-zA-Z0-9]*$");
username.oninput = function() {
if(!reg.test(this.value)) {
namewarn.innerText = "用户名必须以字母开头，其它为字母或者数字的组合"
} else if(this.value.length < 5 || this.value.length > 10) {
namewarn.innerText = "请输入5-10位的用户名"
} else {
namewarn.innerText = ""
}
}
var ret = new RegExp("^[a-zA-Z0-9]*$");
password.oninput = function() {
if(!ret.test(this.value)) {
pwdwarn.innerText = "密码必须是字母或者数字的组合"
} else if(this.value.length < 6 || this.value.length > 8) {
pwdwarn.innerText = "密码必须为6-8位"
} else {
pwdwarn.innerText = ""
}
}
$("#sub").onclick = function() {
if(namewarn.innerText != "" || pwdwarn.innerText != "" || username.value == "" || password.value == "") {
napwwarn.innerText="请按要求输入用户名和密码";
} else if(username.value != "admin" || password.value != "123456") {
napwwarn.innerText="用户名或密码错误";
} else {
send();
}
}
function send() {
var username = $("#username").value;
var password = $("#password").value;
var url = "userfor.html" + "?" + "username=" + encodeURI(username) + "&password=" + encodeURI(password);
window.location.href = url;
}
</script>
</html>
userfor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="kk()">
你的用户名是：
<span id="user"></span>
<br />你的密码是：
<span id="password"></span>
<script type="text/javascript">
var url = decodeURI(location.href);
var getval = url.split('?')[1];
var user = document.getElementById("user");
var password = document.getElementById("password");
function kk() {
user.innerHTML = getval.split('&')[0].split('=')[1];
password.innerHTML = getval.split('&')[1].split('=')[1];
}
</script>
</body>
</html>
