前端实现情感树洞页面效果demo1-登陆注册页面（sign.html）

编程语言 2018-12-06 17:46:19 阅读次数: 0

更多内容敬请关注此CSDN及Halo-FocusPoints博客

页面效果：情感树洞

默认账号:admin 密码:123456

demo下载：情感树洞demo.zip

目录构造

├──情感树洞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博客。

猜你喜欢

转载自blog.csdn.net/jancy_su/article/details/84844405
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022