For Java,Python.

情感树洞前端页面代码demo1 - 登陆注册页面(sign.html)

2018.01.20

目录构造

├──情感树洞demo
│  └── sign.html
│  └── index.html
│  └── user_control.html
│  └── css/
│     ├── bootstrap.min.css
│     ├── font-awesome.css
│     ├── index.css
│     └── style.css
│  └── js/
│     ├── bootstrap.min.js
│     ├── common.js
│     └── isScroll.js
│     ├── jquery.panelslider.min.js
│     └── jquery-1.9.1.min.js
└───── images/
      ├── bg1.jpg
      ├── bg2.jpg
      ├── home_bg_img.jpg
      ├── logo_large.png
      ├── logo_medium.png
      └── DSC_0243.jpg

首先,我们来构思一下整个页面的构造

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>登录-情感树洞</title>
    		<!--引入JQ1.9.1文件-->
    		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
    	</head>
    	<body>
    		<!--添加一个div放置背景,由于我们采用可晃动的背景效果,所以采用div标签-->
    		<div id="login_bg"></div>
    		<!--页面主体-->
    		<div>
	    		<!--第一个模块:放置两个按钮,触发登录和注册,为了方便设置css样式,这里采用div标签-->
	    		<div>
	    			<div>登录</div>
	    			<div>注册</div>
	    		</div>
	    		<!--第二个模块:放置div存放登录、注册的版块-->
	    		<div>
	    			<!--放置form标签以便于在前后端整合时,方便发送前端账号密码给服务器端验证-->
	    			<form>
	    				<!--注意:这里只添加一个form来存放登录注册,然后通过js来判断当前显示的模块为登录还是注册-->
	    			</form>
	    		</div>
	    		<!--第三个模块:放置异步请求时的响应窗口-->
	    		<div></div>
	    	</div>
    	</body>
    </html>

以上代码为最初构思代码结构,可以看出主要的代码段分为三个模块:功能按钮、登录注册版块、异步请求响应窗口。

这时候,我们再看一下demo页面,然后构思我们缺少的东西以及效果的实现,或者说整个页面的执行流程。

大致为:

  • [ ] 1、 显示登录注册按钮
  • [ ] 2、点击按钮
  • [ ] 3、显示登录注册版块
  • [ ] 4、填写账号密码
  • [ ] 5、提交表单验证(包含前、后端验证)
  • [ ] 6、验证成功,显示异步请求响应窗口
  • [ ] 7、跳转下一页面。

我们先来添加页面的背景图及其效果: css目录下创建style.css文件

@charset "utf-8";
/* CSS Document */
/* 初始化设置 */
* {
	padding: 0;
	margin: 0;
}

body {
	font-family: "微软雅黑";
	font-size: 12px;
	color: black;
	height: 100%;
}

img {
	display: block;
	font-size: 0px;
	border: none;
}

a {
	color: black;
	text-decoration: none;
}
/***************sign.html***************/
#login_bg{
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		background-image: url(../images/bg1.jpg);
		background-position: 50% 10%;
		background-size: auto;
}

引入css文件:

<!--引入自定义样式-->
<link rel="stylesheet" type="text/css" href="css/style.css">

创建common.js文件

$(document).mousemove(function(e){	//背景移动
	var page_width = $("body").width();
	var x = e.pageX;
	x=40+(((x-page_width/2)/page_width)*100+50)/20;
	x = x+"% 10%";
	var obj = document.getElementById("login_bg")
	obj.style.backgroundPosition = x;
});

引入js文件(引入位置置于jq文件后,不然jq文件不会生效):

<script type="text/javascript" src="js/common.js"></script>

这时候,我们再看页面,就有了随鼠标晃动的效果。

接下来,我们研究三个板块的定位问题

先按照各个模块的定义来赋予其id及class并填入input等标签 代码如下:

<html>

	<head>
		<meta charset="utf-8">
		<title>登录-情感树洞</title>
		<!--引入自定义样式-->
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<!--引入JQ1.9.1文件-->
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	</head>

	<body>
		<!--添加一个div放置背景,由于我们采用可晃动的背景效果,所以采用div标签-->
		<div id="login_bg"></div>
		<!--页面主体-->
		<div id="login_content" class="contruct">
			<!--第一个模块:放置两个按钮,触发登录和注册,为了方便设置css样式,这里采用div标签-->
			<div id="login_content_logo">
				<img src="images/logo_large.png">
				<div id="login_content_log">登录</div>
				<div id="login_content_reg">注册</div>
			</div>
			<!--第二个模块:放置div存放登录、注册的版块-->
			<div id="login_content_log_02">
				<p id="login_defeat">账号或密码错误</p>
				<!--放置form标签以便于在前后端整合时,方便发送前端账号密码给服务器端验证-->
				<form name="form">
					<!--注意:这里只添加一个form来存放登录注册,然后通过js来判断当前显示的模块为登录还是注册-->
					<div id="login_input1"><input id="login_input11" type="text" name="user" value="用户名" autocomplete="off"></div>
					<div id="login_input2"><input id="login_input12" type="text" name="password" value="密码" autocomplete="off"></div>
					<div id="login_input5"><input id="login_input33" type="text" name="user" value="用户名" autocomplete="off"></div>
					<div id="login_input6"><input id="login_input44" type="text" name="password" value="密码" autocomplete="off"></div>
					<p id="login_tip"></p>
					<div id="login_input4">登录</div>

					<div id="login_input3"><input type="checkbox" value="3" name="remeber" checked="checked">记住密码</div>
					<p id="login_link1">
						<a href="#">忘记密码</a>
					</p>
					<p id="login_link2">
						<a href="#">注册账号</a>
					</p>
				</form>
				<p id="login_close">×</p>
			</div>
			<!--第三个模块:放置异步请求时的响应窗口-->
			<div id="login_content_log_03">
				<!--返回用户头像-->
				<div id="login_success_img">
					<img src="images/DSC_0243.jpg" width="80" height="80">
				</div>
				<p id="login_success1">欢迎回来,<span id="welcome_user">admin</span></p>
				<p id="login_success2">浏览器将在3秒后跳转至首页</p>
				<p id="login_success3">
					<!--服务器端返回首页地址-->
					<a href="home.html">如果浏览器长时间没有跳转,点击这里返回首页</a>
				</p>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/common.js"></script>

</html>

效果如下: 我们通过下面的css样式达到我们想要的布局效果。

@charset "utf-8";
/* CSS Document */
/* 初始化设置 */
* {
	padding: 0;
	margin: 0;
}

body {
	font-family: "微软雅黑";
	font-size: 12px;
	color: black;
	height: 100%;
}

img {
	display: block;
	font-size: 0px;
	border: none;
}

a {
	color: black;
	text-decoration: none;
}
/***************sign.html***************/
#login_bg{
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		background-image: url(../images/bg1.jpg);
		background-position: 50% 10%;
		background-size: auto;
}
#login_content{
	width: 100%;
}
/*模块一*/
#login_content_logo {
    padding-top: 150px;
    position: relative;
    width: 960px;
    height: auto;
    margin: 0 auto;
}
#login_content_logo img {
	width: 30%;
	height: auto;
	margin: 0 auto;
}
#login_content_log,#login_content_reg,#login_input4 {
	transition: background-color 0.5s;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	-ms-transition: background-color 0.5s;
	width: 250px;
	height: 35px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	-webkit-border-radius: 3px;
	margin: 0 auto;
	margin-top: 50px;
	background-color: #0099cc;
	color: white;
	font-size: 15px;
	text-align: center;
	line-height: 35px;
	cursor: pointer;
}
#login_content_reg{
	margin-top: 35px;
	background-color: white;
	color: black;
}
#login_content_log:hover {
	background-color: #006FB8;
}
#login_content_reg:hover {
	background: #E3E3E3;
}
/*模块二*/
#login_content_log_02 {
/*	display: none;*/
	width: 300px;
	height: 230px;
	position: absolute;
	background-image: url(../images/bg2.png);
	background-repeat: repeat;
	top: 300px;
	left: 50%;
	margin-left: -150px;
}
#login_input1 input,
#login_input2 input,
#login_input5 input,
#login_input6 input {
	padding: 3px 10px;
	width: 229px;
	height: 27px;
	border: none;
	background-color: transparent;
	outline-style: none;
	font-size: 10px;
	font-family: "微软雅黑";
	color: #9F9F9F;
}
#login_input1,#login_input5 {
	width: 250px;
	height: 35px;
	margin: 0 auto;
	margin-top: 30px;
	border: gray 1px solid;
	background-color: white;
}
#login_input2,#login_input6 {
	width: 250px;
	height: 35px;
	margin: 0 auto;
	margin-top: 15px;
	border: gray 1px solid;
	background-color: white;
}
#login_input4 {
	position: relative;
	width: 250px;
	height: 35px;
	font-size: 15px;
	text-align: center;
	line-height: 35px;
	background-color: #0099cc;
	border: none;
	margin: 0 auto;
	margin-top: 25px;
	color: white;
	cursor: pointer;
	border: #0099cc 1px solid;
}
#login_input3 {
	float: left;
	margin: 20px 10px 0px 20px;
}
#login_link1,
#login_link2 {
	float: left;
	width: 60px;
	margin: 20px 19px 0px 25px;
}
#login_link1 a:hover,
#login_link2 a:hover {
	text-decoration: underline;
}
#login_close {
	position: absolute;
	top: -5px;
	right: 1px;
	cursor: pointer;
	font-size: 20px;
}
#login_defeat {
	width: 120px;
	height: 25px;
	text-align: center;
	line-height: 25px;
	background-color: #9B0002;
	color: white;
	position: absolute;
	z-index: 3;
	left: 50%;
	margin-left: -60px;
	top: -25px;
}
/*模块三*/
#login_content_log_03 {
	/*display: none;*/
	position: absolute;
	width: 300px;
	height: 230px;
	background-image: url(../images/bg2.png);
	background-repeat: repeat;
	top: 300px;
	left: 50%;
	margin-left: -150px;
}
#login_success_img {
	width: 80px;
	height: 80px;
	border-radius: 40px;
	overflow: hidden;
	margin: 0 auto;
	margin-top: 20px;
}

#login_success1 {
	text-align: center;
	font-size: 15px;
	color: black;
	margin-top: 20px;
}

#login_success1 span {
	font-size: 16px;
	color: #0099cc;
}

#login_success2 {
	text-align: center;
	margin-top: 20px;
	font-size: 12px;
}

#login_success3 {
	text-align: center;
	margin-top: 5px;
	font-size: 12px;
}



#login_tip {
	position: absolute;
	left: 0;
	top: 125px;
	text-align: center;
	width: 100%;
	font-size: 9px;
	color: #8C0002;
	margin: 0 auto;
}


这时候,应该会质疑这页面是有bug吧?并不是,而是我们在使用当前模块时,没有隐藏其他模块造成的。 我们在回到我们的执行流程,我们按流程来展示、隐藏模块并添加相应的js。 我们在访问页面时,最先进入的是初始化状态,即为下面的第一点。 -[ ] 1、 显示登录注册按钮

  • [ ] 2、点击按钮
  • [ ] 3、显示登录注册版块
  • [ ] 4、填写账号密码
  • [ ] 5、提交表单验证(包含前、后端验证)
  • [ ] 6、验证成功,显示异步请求响应窗口
  • [ ] 7、跳转下一页面。

1.显示登录注册按钮 、隐藏其他 我们只需要在模块二、三的css中添加

display:none;

这里,模块二中的提示账号密码错误的p标签也应隐藏 此时,页面已经完成的初始化状态。 接下来,就全靠js来实现模块间的切换了。 在common.js中添加如下代码:

/*sign.html*/

//点击登录按钮,隐藏模块一,显示模块二的登录界面。
$("#login_content_log").on('click', function() {
	$("#login_content_logo").fadeOut();
	$("#login_input5,#login_input6").fadeOut(0);
	$("#login_input1,#login_input2,#login_content_log_02,#login_input3").fadeIn();
	$("#login_input4").html("登录");
//	$('form').setAttribute('action','/login') //给form赋予action属性
});
//点击注册按钮,隐藏模块一,显示模块二的注册界面。
$("#login_content_reg").on('click', function() {
	$("#login_content_logo").fadeOut();
    $("#login_input5,#login_input6").fadeIn();
	$("#login_input1,#login_input2,#login_content_log_02,#login_input3").fadeOut(0);
    $("#login_input4").html("注册");
//	$('form').setAttribute('action','/login')//给form赋予action属性
});
//点击关闭按钮,隐藏模块二,显示模块一
$("#login_close").on('click', function() {
	$("#login_content_logo").fadeIn();
    $("#login_content_log_02").fadeOut();
});

至此模块一、二的显示、隐藏问题已经解决。


由于模块三是在表单验证成功后显示,所以我们先来搞定模块二表单提交、前端表单验证。

//表单验证
$("#login_input4").on('click', function() { //登陆按钮
	var user = $("#login_input11").val();
	var password = $("#login_input12").val();
	if(user == '' || user == '用户名') {
		$('#login_tip').html("用户名不能为空");
		$("#login_input11").focus();
		return false;
	} else if(password == '' || password == '密码') {
		$('#login_tip').html("密码不能为空");
		$("#login_input12").focus();
		return false;
	} else {
		$('#login_tip').html("登录中...");
		t = setTimeout("demo()", 1500);
	}
});

这里没有添加详细的表单验证需求,如密码限制为16位等。

如需了解前端表单验证,请关注CSDN博客Halo-FocusPoints博客后续更新。


然后是模块三部分 因为到目前为止,我们使用的页面仅仅是前端静态页面。所以我们要模拟一个登陆成功的效果。 在common.js中添加如下代码:

function demo() { //效果测试
	var user = $("#login_input11").val();
	var password = $("#login_input12").val();
	if(user == "admin" && password == "123456") {
		$("#login_content_log_02").fadeOut();
        $("#login_content_log_03").fadeIn();
		t1 = setTimeout("window.location.href='index.html'", 3000);
	} else {
		$('#login_tip').html("账号或密码错误!");
        $('#login_tip').fadeIn();
		$('#login_tip').fadeOut(1000);
	}
}

至此,sign.html的效果已经全部完成。

后续内容:index.html 前后端代码实现、user.html 前后端代码实现及前后端整合, 请关注Halo-FocusPoints博客

demo下载:情感树洞demo.zip 默认账号:admin 密码:123456