登录注册画面
把HTML, CSS和JS放在了同一个文件。这是登录注册画面，真的美。而且登录注册是真的可以哦~但背景图还得自己准备，在当前目录新建一个images文件夹，里面放背景图，名字是“background2.png”
好了不废话了，上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录注册画面</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
color: #fff;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
body {
background-color: #000;
background-image: url("images/background2.png");
background-repeat: no-repeat;
background-size: 100%;
}
button, input {
position: absolute;
top: 22%;
width: 15%;
height: 6%;
border: none;
cursor: pointer;
}
#main-login-div-button {
left: 35%;
background-color: #ff7846;
}
#main-registered-div-button {
left: 50%;
background-color: #4678ff;
}
#main-login-div, #main-registered-div {
position: absolute;
left: 35%;
top: 28%;
width: 30%;
height: 50%;
text-align: center;
padding-top: 30px;
color: #5950ff;
background-color: #a6fff0;
}
#main-registered-div *, #main-login-div * {
padding-top: 30px;
color: #5950ff;
}
#main-registered-div input, #main-login-div input {
border: 1px solid white;
border-radius: 10px;
padding-top: 0;
margin: 0 auto;
width: 60%;
height: 7%;
}
#main-login-div-title, #main-registered-div-title {
padding-top: 0;
font-size: 28px;
}
#main-login-div-getButton, #main-registered-div-getButton {
position: absolute;
border: none;
color: #fff;
background-color: #ff7846;
left: 23%;
top: 80%;
}
#main-login-div-emptyButton, #main-registered-div-emptyButton {
position: absolute;
border: none;
color: #fff;
background-color: #4678ff;
left: 23%;
top: 87%;
}
input:hover, input:focus {
background-color: #ffeb3b;
}
input:required {
background-color: #2af711;
}
</style>
</head>
<body>
<div id="main-div">
<button id="main-login-div-button">登录</button>
<div id="main-login-div" style="display: block;">
<h2 id="main-login-div-title">登录</h2>
<br>
<span>Username: </span><input type="text" maxlength="35" placeholder="Username" id="main-login-div-username"><br><br><br>
<span>Password: </span><input type="password" maxlength="40" placeholder="Password" id="main-login-div-password"><br><br><br><br><br><br>
<input type="button" id="main-login-div-getButton" value="确定"></input>
<input type="button" id="main-login-div-emptyButton" value="清空"></input>
</div>
<button id="main-registered-div-button">注册</button>
<div id="main-registered-div" style="display: none;">
<h2 id="main-registered-div-title">注册</h2>
<br>
<span>Username: </span><input type="text" maxlength="35" placeholder="Username" id="main-registered-div-username"><br><br><br>
<span>Password: </span><input type="password" maxlength="40" placeholder="Password" id="main-registered-div-password"><br><br><br>
<span>Password Again: </span><input type="password" maxlength="40" placeholder="Password again" id="main-registered-div-passwordAgain"><br><br><br>
<input type="button" id="main-registered-div-getButton" value="确定"></button>
<input type="button" id="main-registered-div-emptyButton" value="清空"></button>
</div>
</div>
<script src="jquery-1.7.2/jquery1.7.2.js"></script>
<script src="scriptTools.js"></script>
<script>
$(function () { //绑定文件加载的监听
var messages = {};
//获取基本数据
var $oDiv = $('#main-div');
var $oLoginDiv = $('#main-div>#main-login-div');
var $oRegisteredDiv = $('#main-div>#main-registered-div');
var $oLoginGetBtn = $('#main-div>#main-login-div-button');
var $oRegisteredGetBtn = $('#main-div>#main-registered-div-button');
var $oLoginEnter = $('#main-login-div-getButton');
var $oRegisteredEnter = $('#main-registered-div-getButton');
var $oLoginUsername = $('#main-login-div-username');
var $oLoginPassword = $('#main-login-div-password');
var $oRegisteredUsername = $('#main-registered-div-username');
var $oRegisteredPassword = $('#main-registered-div-password');
var $oRegisteredPasswordagain = $('#main-registered-div-passwordAgain');
//绑定主事件
$oLoginGetBtn.click(function () {
$oLoginDiv.css('display', 'block');
$oRegisteredDiv.css('display', 'none');
})
$oRegisteredGetBtn.click(function () {
$oRegisteredDiv.css('display', 'block');
$oLoginDiv.css('display', 'none');
})
$('#main-registered-div-emptyButton').click(function () {
$('#main-registered-div-username').val('');
$('#main-registered-div-password').val('');
$('#main-registered-div-passwordAgain').val('');
})
$('#main-login-div-emptyButton').click(function () {
$('#main-login-div-username').val('');
$('#main-login-div-password').val('');
})
$oLoginEnter.on('click', function () {
if(findElementObj(messages, $oLoginUsername.val())) {
if($oLoginPassword.val() == messages[$oLoginUsername.val()]) {
alert('登录成功');
$oLoginUsername.val('');
$oLoginPassword.val('');
}
else {
alert('密码错误');
$oLoginUsername.val('');
$oLoginPassword.val('');
}
}
else {
alert('用户名错误');
$oLoginUsername.val('');
$oLoginPassword.val('');
}
})
$oRegisteredEnter.on('click', function () {
if($oRegisteredUsername.val() != '' && $oRegisteredPassword.val() != '' && $oRegisteredPasswordagain.val() != '') {
if($oRegisteredPassword.val() == $oRegisteredPasswordagain.val()) {
messages[$oRegisteredUsername.val()] = $oRegisteredPassword.val();
$oRegisteredUsername.val('');
$oRegisteredPassword.val('');
$oRegisteredPasswordagain.val('');
alert('成功注册！');
$oRegisteredDiv.css('display', 'none');
$oLoginDiv.css('display', 'block');
}
else {
alert('密码验证错误');
$oRegisteredUsername.val('');
$oRegisteredPassword.val('');
$oRegisteredPasswordagain.val('');
}
}
else {
alert('不能为空');
$oRegisteredUsername.val('');
$oRegisteredPassword.val('');
$oRegisteredPasswordagain.val('');
}
})
setInterval(function () {
if($oLoginUsername.val() == '') {
$oLoginUsername.prop('required', false)
}
else {
$oLoginUsername.prop('required', true)
}
if($oLoginPassword.val() == '') {
$oLoginPassword.prop('required', false)
}
else {
$oLoginPassword.prop('required', true)
}
if($oRegisteredUsername.val() == '') {
$oRegisteredUsername.prop('required', false)
}
else {
$oRegisteredUsername.prop('required', true)
}
if($oRegisteredPassword.val() == '') {
$oRegisteredPassword.prop('required', false)
}
else {
$oRegisteredPassword.prop('required', true)
}
if($oRegisteredPasswordagain.val() == '') {
$oRegisteredPasswordagain.prop('required', false)
}
else {
$oRegisteredPasswordagain.prop('required', true)
}
}, 1)
})
</script>
</body>
</html>
页:
[1]