最近计划做一个非框架的物业管理系统前端使用bootstrap js jquery 等希望各位指点一下共同学习

---前端登录页面------

这个页面的输入框组用的bootstrap的，我设置了几张背景轮询切换（js控制）。

div背景设置了透明（background: rgba(255,255,255, 0.2)）

bootstrap输入框组是全部放入div中的，我用css设置的width,height，用js获取到用户屏幕的宽和高。其中有一种获取到的高度是除去任务栏以后的高度

（其实我非常喜欢这种简约风格）

稍微实现了一下后台输错密码将信息显示在弹出框中 如图：

因为我只是测试了一下前台页面所有后台只是判断账号空就提示错误信息

下面是注册

我把注册写在了登录页面只是注册用bootstrap的模态框实现(因为我想换一种风格)

点击注册按钮时候弹出（这里会有个问题模态框并没有居中，这个是bootstrap的问题，我想让模态框水平垂直居中。试了几种办法，结果都不理想）

注册用js正则判断了一下（用的也是上图那种弹出框）

简单总结一下 ：

　　做这个页面有许多小细节的地方

　　1）弹出框弹出提示信息时候，如果点击其他页面或者说失去焦点以后。弹出框并没有消失。这个需要注意一下（手动设置）$(element).popover("hide");

　　2）上面也提过了 bootstrap的模态框并不是完全居中 要设置的话得修改bootstrap的底层(修改模态框的位置我目前只知道这种办法)

下面是我写的代码，css和js写在了html中方便开发（就我一个人在写。也就无所谓了）。做完以后提出到对应的文件中

代码有些冗余（我计划下礼拜做完如果做的快就把代码优化一下）html的格式也在写的过程中出现了问题（后面会修改）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<%@ page isELIgnored="false" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>系统登录</title>

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<script type="text/javascript" src="access/jquery/jquery-1.12.3.js"></script>

	<!-- 新 Bootstrap 核心 CSS 文件 -->

	<link rel="stylesheet" href="access/css/bootstrap.min.css">

	<!-- 可选的Bootstrap主题文件（一般不用引入） -->

	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

	<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

	<script src="access/js/bootstrap.min.js"></script>

	<script type="text/javascript">

		var count = 1;

		function setBackground(){

			var _body = document.querySelector("body");

			_body.background = "access/images/bg/"+count+".jpg";

			count ++;

			if(count>3){

				count = 1;

			}

		}

		function checkData(_this){

			var reg=/^[a-zA-Z][\w_]{5,13}$/;

			var reg= new RegExp(reg);

			var result = reg.test(_this.value);

			eval("var firstCheck="+_this.getAttribute("firstCheck"));

			if(firstCheck){

				checkMessage(_this,"show");

				_this.setAttribute("firstCheck","false");

			}

			if(result){

				checkMessage(_this,"hide");

				_this.setAttribute("firstCheck","true");

			}

		}

		function count_(){

			setInterval("setBackground()",3000);

			setAdd();

			(function (){

				var lusername = document.querySelector("#lusername");

				var error = lusername.getAttribute("error");

				if("true"===(error)){

					$("#lusername").popover("show");

				}

			})()

		}

		function checkMessage (_this,str) {

			$(_this).popover(str);

		}

		function setAdd(){

			var height = screen.availHeight;

			var width = screen.availWidth;

			var mLabel = document.querySelector("#Label");

			var labelWidth = mLabel.clientHeight;

			var labelHeight = mLabel.clientWidth;

			mLabel.setAttribute("style","margin-top:"+((height-labelHeight-100)/2)+"px"+";margin-left:"+((width-labelWidth)/2)+"px");

		}

		function hidePopover(_this){

			if(_this){

				$(_this).popover("hide");

			}else{

				$("#lusername").popover("hide");

			}

		}

	</script>

	<style type="text/css">

		#Label{

			padding-top: 20px;

			border-radius: 7px;

			width:420px;

			height:420px;

			background-color:#eeeeee;

			background: rgba(255,255,255, 0.2)

		}

		#myModal{

		background: rgba(255,255,255, 0.2);

		}

		#mLabel{

			background: rgba(255,255,255, 0.2);

			padding-top: 20px;

			border-radius: 7px;

			width:455px;

			height:500px;

			background-color:#eeeeee;

		}

		#code_{

		}

	</style>

  </head>

  <body onload="setBackground(),count_()">

    		<div id="Label" style="">

	    		<div class="col-sm-10 col-xs-10 col-lg-10  col-md-offset-1">

	    			  <div class="form-group opacity10">

					    <div class="h2 text-center">系统登录</div>

					  </div>

					  <form action="loginController" method="get">

						  <div class="form-group form-group-lg">

						    <input id='lusername' name="username" type="text" value="${username }"

						  	 class=" form-control" id="exampleInputEmail1" placeholder="账号"

				    		error="${popover==null?false:true }"

				    		onclick="hidePopover(this)"

				    		data-toggle="popover" data-placement="right"

				    		data-container="body" data-html="true"

				    		data-content="<p>账号或密码错误</p>"

				    		data-trigger="manual"

				    		class=" form-control"

				    		id="exampleInputPassword1" placeholder="密码">

						  </div>

						  <div class="form-group form-group-lg">

						    <input type="password" name="password" class="form-control" value="${password }" id="exampleInputPassword1" placeholder="密码">

						  </div>

					  			<div class="input-group form-group-lg">

								  <span class="input-group-addon" id="basic-addon1"><img alt="验证码预留" id="code_" src="1222" title="看不清？换一张"></span>

								  <input type="text" class="form-control" placeholder="验证码" aria-describedby="basic-addon1">

						  		</div>

						  <div class="checkbox">

						    <label>

						      	<input type="checkbox" name="remember" value="true"> 记住密码

						    </label>

						  </div>

						  <div class="btn-group btn-group-justified" role="group">

							   <div class="btn-group" role="group">

							    	<button type="submit" class="btn btn-default btn-lg btn-primary">登录</button>

							  </div>

						  </div>

					  </form>

					  <br/>

					  <div class="form-group text-center">

					  		<i class="">还没有账号？

					  			<a  href="#" data-toggle="modal" onclick="hidePopover()" data-target="#myModal">注册</a>

					  		</i>

					  </div>

					  <form>

					  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

						 	 <div class="modal-dialog modal-sm" role="document">

								    <div class="modal-content">

								    <div class="row">

									    <div class="row">

									    	<div id="mLabel">

									    		<div class="col-lg-10 col-md-offset-1">

									    		<br/>

									    			<div class="form-group form-group-lg">

									    				<div class="h2 text-center">账号注册</div>

									    			</div>

									    			<br/>

										      		<div class="form-group form-group-lg">

													    <input id='username' name="username" type="text"

													   			firstCheck="true"

													    		data-toggle="popover" data-placement="right"

													    		data-container="body" data-html="true"

													    		data-trigger="manual" onkeyup="checkData(this)"

													    		data-content="<p>用户名由字母数字下划线组成</p><p>数字不能作为开头</p><p>用户名长度不能超过10字符个长度</p>"

													    		class=" form-control" id="exampleInputEmail1"

													    		placeholder="账号">

													  </div>

													  <div class="form-group form-group-lg">

														    <input type="password" name="password" class="form-control"

														    		firstCheck="true" onkeyup="checkData(this)"

														    		data-toggle="popover" data-placement="right"

														    		data-container="body" data-html="true"

														    		data-trigger="manual"

														    		data-content="<p>密码由字母数字下划线组成</p><p>密码长度不能超过13字符个长度</p>"

														    		 id="exampleInputPassword1" placeholder="密码">

													  </div>

													   <div class="form-group form-group-lg">

														    <input type="password" class="form-control"

														    		firstCheck="true" onkeyup="checkData(this)"

														    		data-toggle="popover" data-placement="right"

														    		data-container="body" data-html="true"

														    		data-trigger="manual"

														    		data-content="<p>两次输入密码不一致</p>"

														    		 id="exampleInputPassword1" placeholder="确认密码">

													  </div>

												  	  <div class="input-group form-group-lg">

															  <span class="input-group-addon" id="basic-addon1"><img alt="验证码预留" id="code_" src="1222" title="看不清？换一张"></span>

															  <input type="text" class="form-control" placeholder="验证码" aria-describedby="basic-addon1">

													  </div>

													  <br/>

													  <br/>

														  <div class="btn-group btn-group-justified" role="group">

															   <div class="btn-group" role="group">

															    	<button type="submit" class="btn btn-default btn-lg btn-primary">注册</button>

															  </div>

														  </div>

													  </div>

												</div>

												</div>

												</div>

										    </div>

									    </div>

								  </div>

							</div>

					</div>

			</form>

  </body>

</html>

b/s结构的物业管理系统（一）-------登录篇的更多相关文章

  1. SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇（五）： 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑

    (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p ...

  2. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（19）-权限管理系统-用户登录

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(19)-权限管理系统-用户登录 我们之前做了验证码,登录界面,却没有登录实际的代码,我们这次先把用户登录先 ...

  3. FFmpeg源代码简单分析：结构体成员管理系统-AVOption

    ===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...

  4. FFmpeg源代码简单分析：结构体成员管理系统-AVClass

    ===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...

  5. FFmpeg源码简单分析：结构体成员管理系统-AVOption

    ===================================================== FFmpeg的库函数源码分析文章列表: [架构图] FFmpeg源码结构图 - 解码 FFm ...

  6. SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇（一）： 搭建基本环境、整合 Swagger、MyBatisPlus、JSR303 以及国际化操作

    相关 (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y- ...

  7. 手摸手，带你用Beego撸商城系列二（登录篇）

    完整项目地址: go-shop-b2c 系列文章: 手摸手,带你用 Beego撸商城 系列一(基础篇) 手摸手,带你用 Beego撸商城 系列二(登录篇) 手摸手,带你用 Beego撸商城 系列三(系 ...

  8. v75.01 鸿蒙内核源码分析(远程登录篇) | 内核如何接待远方的客人 | 百篇博客分析OpenHarmony源码

    子曰:"不学礼,无以立 ; 不学诗,无以言 " <论语>:季氏篇 百篇博客分析.本篇为: (远程登录篇) | 内核如何接待远方的客人 设备驱动相关篇为: v67.03 ...

  9. AppDelegate减负之常用三方封装 - 友盟分享 / 三方登录篇

    之前完成了 AppDelegate减负之常用三方封装 - 友盟推送篇: http://www.cnblogs.com/zhouxihi/p/7113511.html 今天接着来完成 - 友盟分享和三方 ...

随机推荐

  1. include 问题

    http://blog.sina.com.cn/s/blog_573a052b0100kq1w.html

  2. JavaScript学习基础篇【第1篇】: JavaScript 入门

    JavaScript 快速入门 JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>中,由<script>...< ...

  3. [HDU 4336] Card Collector (状态压缩概率dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4336 题目大意:有n种卡片,需要吃零食收集,打开零食,出现第i种卡片的概率是p[i],也有可能不出现卡 ...

  4. [CF442A] Borya and Hanabi (暴力bitmask)

    题目链接:http://codeforces.com/problemset/problem/442/A 题目大意:给你n张卡片,你知道这n张卡片都是什么,但是不知道他们的位置.你每次可以请求朋友指出一 ...

  5. Postgresql 迁移随笔一

    最近忙于MSSQL 迁移到Postgresql的工程,在这里记录一下迁移遇到的问题以及解法. 程序语言:java 要求,根据不同的driver可以同时支援多种数据库,目前主要为MSSQL 和Postg ...

  6. 在线编辑器的使用总结(kindeditor , )

    1).kindedtor中让编辑框默认为“HTML代码/源代码”模式 [javascript] view plaincopyprint? <script> // 自定义插件 #1 Kind ...

  7. VMware/Microsoft官网查询参加的培训及认证信息

    如果你参加了VMWare的培训,会要求你拿一个已经注册的邮箱加上一个密码在VMware的系统里面登记,这样你就能在VMWARE官网查到注册,并据此你才能申请VMWare的考试认证. 例如下图,路径为 ...

  8. OpenWrt自定义和官方一样的固件

    我用的OpenWrt版本是Barrier Breaker 14.07,硬件是NetGear WNDR4300. 我自定义固件的目的是把固件的根分区扩到最大(100MB,总FLASH是128MB),试过 ...

  9. [转载]python操作excel使用win32com

    原文链接:http://blog.163.com/yang_jianli/blog/static/16199000620138532243782/ 使用COM接口,直接操作EXCEL(只能在Win上) ...

  10. PowerDesigner 逆向中 Name和Comment互换

    在使用PowerDesigner对数据库进行概念模型和物理模型设计时,一般在NAME或Comment中写中文,在Code中写英文.Name用来显 示,Code在代码中使用,但Comment中的文字会保 ...