第三篇

MyHospital03

doctorShow.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>医生导航</title>
<style type="text/css">
		#yuan{
				margin-left: 150px;
				margin-top: 30px;
				margin-bottom: 30px;
			}
		body{	
				height:1000px;			
				 /* Safari 5.1 - 6.0 */
				  background: -webkit-linear-gradient(#BBF5E9, white);
				  background: -moz-linear-gradient(#BBF5E9, white);
				  background: -o-linear-gradient(#BBF5E9, white);
				  background: -webkit-gradient(linear, 0 0, 0 100%, from(#BBF5E9), to(white));
				  background: linear-gradient(#BBF5E9, white); /* Opera 11.1 - 12.0 */
				 /* Firefox 3.6 - 15 */
			}
		ul {
			height: 30px;
			width: 25%;
			display: table;
			padding: 10px;
		}

ul li {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border-left: 1px green solid;
	border-top: 1px green solid;
	border-bottom: 1px green solid;
	cursor: pointer;
}

ul li:last-child {
	border-right: 1px green solid;
	
}

ul li a {
	text-decoration: none;
}

.td1{
width:200px;
height:100px;
}
.td2{
width:300px;
}
.td3{
}
.td4{
width:200px;
}
.td5{
width:200px;
}
		a {
			text-decoration: none;
			color:green;
			}
		td{
			text-align: center;
			vertical-align: middle;
			}
</style>
</head>
<body>
	<div id="yuan">
		<img src="img/院标.png" />
	</div>
	<div id="content1">
		
	</div>
	<div id="content2">
		<ul id="msg_ul">
			
		</ul>
	</div>

</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$.ajax({
			url:"DoctorShowServlet",
			type:"get",
			data:{
				page:1
			},
			dataType:"json",
			success:function(data){
				getPage(data.helper);
				getMsg(data.list);
			}
		})
		//jqery 动态绑定事件 
		$("#msg_ul").on("click","li",function(){
			$.ajax({
				url:"DoctorShowServlet",
				type:"get",
				data:{
					page:$(this).html()
				},
				dataType:"json",
				success:function(data){
					getPage(data.helper);
					getMsg(data.list);
				}
			})
		})
	})
	
	function getPage(data){
		var line = "";
		//获取页码  data
		for(var i = 1; i<= data; i++){
			line += "<li>"+i+"</li>"
		}
		/* line += "<li>跳转:<span></span></li>" */
		$("#msg_ul").html(line);
	}
	
	function getMsg(data){
		//获取信息 
		var line = "<table border='1px' cellspacing='0px' height='600px'><tr><th>名称</th><th>职称</th><th>科室</th><th>擅长</th><th>全部信息</th></tr>"
		for(var i = 0;i<data.length;i++){
			line+= "<tr>";
			line+="<td class='td1'>"+data[i].DOCTOR_NAME+"</td>";
			line+="<td class='td2'>"+data[i].JOB_TITLE+"</td>";
			line+="<td class='td5'>"+data[i].DEPARTMENT_NAME+"</td>";
			line+="<td class='td3'>"+data[i].GOOD_JOB+"</td>";
			line+="<td class='td4'><a href='ReadDoctorServlet?DOCTOR_NAME="+data[i].DOCTOR_NAME+"'>进入</a></td>";
			line+="</tr>";
		}
		line+="</table>";
		$("#content1").html(line);
		
	}
</script>
</html>

guahao.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
}

#yuan {
	margin-left: 150px;
	margin-top: 30px;
	position: absolute;
}

#body {
	height: 860px;
	/* Safari 5.1 - 6.0 */
	background: -webkit-linear-gradient(#BBF5E9, white);
	background: -moz-linear-gradient(#BBF5E9, white);
	background: -o-linear-gradient(#BBF5E9, white);
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#BBF5E9),
		to(white));
	background: linear-gradient(#BBF5E9, white); /* Opera 11.1 - 12.0 */
	/* Firefox 3.6 - 15 */
}

#div1 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 50px;
	font-family: "楷体";
}

tr {
	height: 100px;
}

th {
	width: 300px;
}

td {
	width: 700px;
}

select {
	font-size: 30px;
	font-family: '楷体';
	font-weight: bold;
}

#sub {
	margin: 0 auto;
	width: 0px;
}
</style>
</head>
<body>
	<div id="body">
		<div id="yuan">
			<img src="img/院标.png" />
		</div>
		<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
		<hr>
		<br />
		<div id="div1">预约挂号</div>
		<br />
		<div id="div">
			<form action="GuaHaoServlet" method="get">
				<table border="" cellspacing="5px" cellpadding="0px" align="center"
					style="font-family: '楷体'; font-size: 30px;">
					<tr>
						<th align="right">姓名:</th>
						<td>&nbsp;<input type="text" name="uesrname" id="username"
							value=""
							style="font-size: 30px; font-family: '楷体'; font-weight: bold;" /></td>
					</tr>
					<tr>
						<th align="right">性别:</th>
						<td>&nbsp;<input type="radio" name="sex" id="boy" value="男"
							checked="checked" />男 <input type="radio" name="sex" id="girl"
							value="女" />女
						</td>
					</tr>
					<tr>
						<th align="right">挂号科室:</th>
						<td>&nbsp;<select id="department" name="DEPARTMENT_NAME">
								<option value="">---请选择---</option>
						</select>
						</td>
					</tr>
					<tr>
						<th align="right">挂号医生:</th>
						<td>&nbsp;<select id="name1" name="DOCTOR_NAME">
								<option value="">---请选择---</option>
						</select>
						</td>
					</tr>
					<tr>
						<th align="right">预约问诊时间:</th>
						<td>&nbsp;<select name="time">
								<option value="9:00~10:00">9:00~10:00</option>
								<option value="10:00~11:00">10:00~11:00</option>
								<option value="13:00~14:00">13:00~14:00</option>
								<option value="14:00~15:00">14:00~15:00</option>
								<option value="15:00~16:00">15:00~16:00</option>
						</select>
						</td>
					</tr>
					<tr>
						<th align="right">挂号费用:</th>
						<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;9元</td>
					</tr>
				</table>
				<br />
				<br />
				<div id="sub">
					<input type="submit" value="提交"
						style="font-size: 30px; font-weight: bold;" />
				</div>
			</form>
		</div>
	</div>
</body>
<script type="text/javascript">
	window.onload = function() {
		var area = [
				{
					department : "肾内科",
					name : [ "毕增祺", "李学旺" ]
				},
				{
					department : "消化内科",
					name : [ "杨爱明", "李景南" ]
				},
				{
					department : "血液内科",
					name : [ "武永吉", "沈悌" ]
				},
				{
					department : "风湿免疫科",
					name : [ "董怡", "唐福林" ]
				},
				{
					department : "感染内科",
					name : [ "李太生", "王爱霞" ]
				},
				{
					department : "皮肤科",
					name : [ "晋红中", "马东来" ]
				},
				{
					department : "神经外科",
					name : [ "王任直", "马文斌" ]
				},
				{
					department : "肝脏外科",
					name : [ "钟守先", "马文斌" ]
				},
				{
					department : "麻醉科",
					name : [ "任洪智", "任洪智" ]
				},
				{
					department : "妇产科",
					name : [ "郎景和", "沈铿" ]
				},
				{
					department : "眼科",
					name : [ "赵家良", "钟勇" ]
				},
				{
					department : "放射治疗科",
					name : [ "张福泉", "胡克" ]
				},
				{
					department : "放射科",
					name : [ "金征宇", "冯逢" ]
				},
				{
					department : "检验科",
					name : [ "徐英春", "陈富强" ]
				},
				{
					department : "病理科",
					name : [ "陈杰", "崔全才" ]
				},
				{
					department : "中医科",
					name : [ "梁晓春", "田国庆" ]
				},
				{
					department : "临床营养科",
					name : [ "于康", "陈伟" ]
				},
				{
					department : "骨科",
					name : [ "邱贵兴", "王以朋" ]
				},
				{
					department : "心外科",
					name : [ "苗齐", "刘兴荣" ]
				},
				{
					department : "胸外科",
					name : [ "李单青", "刘洪生" ]
				},
				{
					department : "泌尿外科",
					name : [ "李汉忠", "纪志刚" ]
				},
				{
					department : "急诊科",
					name : [ "史迪", "刘安雷", "柴晶晶", "张晖", "于学忠", "朱华栋", "刘继海",
							"徐军", "李毅" ]
				}, 
				{
					department : "口腔科",
					name : [ "王琪", "石钿印", "王木", "张新媛", "赵继志", "赖钦声", "郝钟欣" ]
				},
				{
					department : "输血科",
					name : [ "李大魁", "张继春" ]
				}, 
				{
					department : "核医学科",
					name : [ "姜玉新", "李建初" ]
				} ]
		area.forEach(function(a) {
			var opt = document.createElement("option");
			opt.innerHTML = a.department;
			department.appendChild(opt);
		});

		department.onchange = function(i) {
			name1.innerHTML = "<option>---请选择---</option>";
			var p_index = this.selectedIndex;
			var c = area[p_index - 1].name;
			c.forEach(function(a) {
				var opt = document.createElement("option");
				opt.innerHTML = a;
				name1.appendChild(opt);
			});
		}
	}
</script>
</html>

login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<style type="text/css">
			#div_head{	
				background-color: red;
				width: 100px;
				text-align: center;
				margin-left: 48%;
			}
			
			body{				
				 /* Safari 5.1 - 6.0 */
				  background: -webkit-linear-gradient(#BBF5E9, white);
				  background: -moz-linear-gradient(#BBF5E9, white);
				  background: -o-linear-gradient(#BBF5E9, white);
				  background: -webkit-gradient(linear, 0 0, 0 100%, from(#BBF5E9), to(white));
				  background: linear-gradient(#BBF5E9, white); /* Opera 11.1 - 12.0 */
				 /* Firefox 3.6 - 15 */
			}
			#body_div{
				
				width: 450px;
				height: 1000px;
				margin-top: 50px;
				margin-left: 45%;
			}
		</style>
</head>
<body>
	<div id="div_head">
			<h1>登录</h1>
		</div>
		<div id="body_div">
		<form action="LoginServlet" method="get">
			<div>
				 登录账号:<input type="text" name="userName" id="userName"/>	
			</div>
			<br />
			<div>
				用户密码:<input type="password" name="userPwd" id="userPwd"/>
			</div><br /><br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input/ type="submit" value="登录"">
				&nbsp;&nbsp;&nbsp;<input type="reset" name="" id="" value="重填" />
		</form>
	</div>
</body>
</html>

login1.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="modal-header">
			<button class="close" data-dismiss="modal">&times;</button>
			<h4>登录界面</h4>
		</div>
		<div class="modal-body">
			<form role="form">
				<div class="form-group">
					<label for="email">邮箱</label>
					<input type="email" id="email" class="form-control" placeholder="请输入邮箱" />
				</div>
				<div class="form-group">
					<label for="password">密码</label>
					<input type="password" id="password" class="form-control" placeholder="请输入密码" />
				</div>
			</form>
		</div>
		<div class="modal-footer">
			<button class="btn btn-primary">登录</button>
		</div>
	</body>

</html>

loginControl.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String login = (String) session.getAttribute("login");
if (login == null) {
	response.sendRedirect("index.jsp");
	return;
} %>

</body>
</html>

readDepartment.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- JSTL 
    core  核心标签库
    -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>  <!-- 标签库 --> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>科室信息</title>
	<link rel="stylesheet" type="text/css" href="css/read.css"/>
	
</head>
<body bgcolor="#f8f8f8">
	<div class="main1"></div>
	<div class="main2">
		<div class="mulu">公告:${requestScope.department.DEPARTMENT_NOTICE_HEAD  }</div>
		<div class="zhangjie">
			${requestScope.department.DEPARTMENT_NOTICE_CONTENT  }
		</div>
		<div id="wenzhang" class="wenzhang">
			<h1>科室医生<h1>
			<div id="content1" style="margin-left: 20%;">	
			<%request.getAttribute("list"); %>
						<c:forEach items="${list}" var="n">
						<table>
							<tr >
								<%-- <th>姓名:</th>
								<td>${n.DOCTOR_NAME}</td> --%>
								<th>${n.DOCTOR_NAME}<br/>
								<a href='ReadDoctorServlet?DOCTOR_NAME=${n.DOCTOR_NAME}
						'><img src='img/医生图片/${n.DOCTOR_NAME}
						.jpg' style="height: 400px;width: 400px;"/></a>
								</th>
								<!-- <a href='ReadDoctorServlet?DOCTOR_NAME="+data[i].DOCTOR_NAME+
						"'><img src='img/医生图片/"+data[i].DOCTOR_NAME+
						".jpg' style='height: 400px;width: 400px;'/></a> -->
							</tr>
						</table>
						<br />
						<br /><br />
						</c:forEach>	
			</div>
		</div>
	</div>
	<div class="left">
		<img id="showimg" src="img/部门图片/${requestScope.department.DEPARTMENT_NAME }.jpg" />
	</div>
	<div class="right">
		<div id="bookName" class="name">${requestScope.department.DEPARTMENT_NAME }</div>
		<div class="author">${requestScope.department.DEPARTMENT_SYNOPSIS }</div>		
	</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
	var url = decodeURI(window.location.href);
	var index = url.indexOf("=");
	var lines = url.substr(index+1);
	/* alert(lines); */
	$.ajax({
		url:"DoctorInDepartmentServlet",
		type:"get",
		data:{
			DEPARTMENT_NAME:lines
		},
		dataType:"json",
		success:function(data){
			console.log(data);
			/* getMsg(data.list); */
			data=$.trim(data);
			/* for(var i = 0;i<data.length;i++){		
				line+="<td><a href='ReadDoctorServlet?DOCTOR_NAME="+data[i].DOCTOR_NAME+
						"'><img src='img/医生图片/"+data[i].DOCTOR_NAME+
						".jpg' style='height: 400px;width: 400px;'/></a></td>";
				if(i%3==0){
					line+="</tr><tr>";
					}
				} */
		}
	})
	})
</script>

</html>

readDoctor.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>医生信息</title>
	<link rel="stylesheet" type="text/css" href="css/read.css"/>
	<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body bgcolor="#f8f8f8">
	<div class="main1"></div>
	<div class="main2">
		<div class="mulu"></div>
		<div class="zhangjie">
			${requestScope.doctor.INTRODUCTION  }
		</div>
		<div id="wenzhang" class="wenzhang"></div>
	</div>
	<div class="left">
		<img id="showimg" src="img/医生图片/${requestScope.doctor.DOCTOR_NAME }.jpg" />
	</div>
	<div class="right">
		<div id="bookName" class="name">${requestScope.doctor.DOCTOR_NAME }</div>
		<div class="author">${requestScope.doctor.DEPARTMENT_NAME }</div>
		<div class="neirong">${requestScope.doctor.JOB_TITLE  }</div>
		<div class="img">
			
		</div>
	</div>
</body>
<script type="text/javascript">
	

</script>

</html>

register.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#div_head{	
				background-color: red;
				width: 100px;
				text-align: center;
				margin-left: 45%;
			}
			
			body{				
				 /* Safari 5.1 - 6.0 */
				  background: -webkit-linear-gradient(#BBF5E9, white);
				  background: -moz-linear-gradient(#BBF5E9, white);
				  background: -o-linear-gradient(#BBF5E9, white);
				  background: -webkit-gradient(linear, 0 0, 0 100%, from(#BBF5E9), to(white));
				  background: linear-gradient(#BBF5E9, white); /* Opera 11.1 - 12.0 */
				 /* Firefox 3.6 - 15 */
			}
			#body_div{
				
				width: 450px;
				height: 1000px;
				margin-top: 50px;
				margin-left: 35%;
			}
		</style>
	</head>

	<body>
		<div id="div_head">
			<h1>注册</h1>
		</div>
		<div id="body_div">
			
				<form action="RegisterServlet" method="get" onsubmit="return func()">
				
						姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:	<input type="text" name="userName" id="userName" value="" placeholder="请输入用户名"/>
						<span id="span"></span><br /> 
							<div id="div_iname"></div>
						<br />
					      登录账号:
							<input type="text" name="account" id="uname" value="" placeholder="请输入登录账号"/>(可包含a-z、0-9和下划线)
							<div id="div_uname"></div><br />
						密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:
							<input type="password" name="userPwd" id="upsw" placeholder="请输入密码"/>(至少包含6个字符)
							<div id="div_upsw"></div><br />
						确认密码:
							<input type="password" id="rpsw" placeholder="请再次输入密码"/>
							<div id="div_rpsw"></div><br />
						联系电话:
								<input type="text" name="telphone" id="firstname"/>
								<div id="div_firstname"></div>
								<br />												
						邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:
							<input type="text" name="mail" id="umail" value="" />(必须包含@和.字符)
							<div id="div_umail"></div><br />
						性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:
							<input type="radio" name="sex" checked="checked" value="男" /> 男
							<input type="radio" name="sex" value="女" /> 女<br /> <br />
						年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄:
							<input type="text" name="age" /><br /> <br />
					
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="" id="subok" value="注册" />
							<input type="reset" name="" id="" value="重填" />					
				</form>
			
		</div>
	</body>
	<script type="text/javascript">
		$(function() {
			$("#userName").on("keyup", function() {
				var userName = $(this).val();
				/*
				异步请求  
				局部刷新  
				 */
				$.ajax({
					type: "get",
					/*请求方式*/
					url: "TestNameServlet",
					/*路径*/
					data: { /*传递的数据 */
						name: userName
					},
					success: function(data) { //成功的回调函数 
						$("#span").html(data);
						if(data == "用户名已存在") {
							$("#submit").attr("disabled", "disabled");
						} else {
							$("#submit").attr("disabled", false);
						}
					}
				});
			})
		})
		$(function() {
			$("#userName").on("focusout", function a() {
				var iname1 = $("#userName").val();
				var num = /^\d{1,}$/;
				if(iname1 == "") {
					bn_iname = false;
					div_iname.style.color = "red";
					div_iname.innerHTML = "名字不能为空";
				} else {
					if(num.test(iname1)) {
						bn_iname = false;
						div_iname.style.color = "red";
						div_iname.innerHTML = "名字不能含数字";
					} else {
						div_iname.style.color = "green";
						div_iname.innerHTML = "名字可以使用";
						bn_iname = true;
					}
				}
				return bn_iname;
			})
			$("#firstname").on("focusout", function b() {
				var firstname1 = $("#firstname").val();
				if(firstname1 == "") {
					bn_firstname = false;
					div_firstname.style.color = "red";
					div_firstname.innerHTML = "联系电话不能为空";
				} else {
						div_firstname.style.color = "green";
						div_firstname.innerHTML = "联系电话可以使用";
						bn_firstname = true;
					}
				

				return bn_firstname;
			})
			
			$("#uname").on("focusout", function c() {
				var uname1 = $("#uname").val();
				var num = /^\w+$/;
				if(uname1 == "") {
					bn_uname = false;
					div_uname.style.color = "red";
					div_uname.innerHTML = "登录名不能为空";
				} else {
					if(num.test(uname1)) {
						bn_uname = true;
						div_uname.style.color = "green";
						div_uname.innerHTML = "登录名可以使用";
					} else {
						div_uname.style.color = "red";
						div_uname.innerHTML = "登录名无效";
						bn_uname = false;
					}
				}
				return bn_uname;
			})
			$("#upsw").on("focusout", function d() {
				var upsw1 = $("#upsw").val();
				//var num=/^\w+$/;
				if(upsw1 == "") {
					bn_upsw = false;
					div_upsw.style.color = "red";
					div_upsw.innerHTML = "密码不能为空";
				} else {
					if(upsw1.length >= 6) {
						bn_upsw = true;
						div_upsw.style.color = "green";
						div_upsw.innerHTML = "密码可以使用";
					} else {
						div_upsw.style.color = "red";
						div_upsw.innerHTML = "密码无效";
						bn_upsw = false;
					}
				}
				return bn_upsw;
			})
			$("#rpsw").on("focusout", function e() {
				var rpsw1 = $("#rpsw").val();
				var upsw1 = $("#upsw").val();
				if(rpsw1==upsw1) {
					bn_rpsw = true;
					div_rpsw.style.color = "green";
					div_rpsw.innerHTML = "密码一致";
				} else {
					div_rpsw.style.color = "red";
					div_rpsw.innerHTML = "两次密码不一致";
					bn_rpsw = false;
				}
				return bn_rpsw;
			})
			$("#umail").on("focusout", function f() {
				var umail1 = $("#umail").val();
				var num=/^\w[-\w.+]*@(qq|sina)\.+com$/;
				if(umail1 == "") {
					bn_umail = false;
					div_umail.style.color = "red";
					div_umail.innerHTML = "电子邮箱不能为空";
				} else {
					if(num.test(umail1)) {
						bn_umail = true;
						div_umail.style.color = "green";
						div_umail.innerHTML = "电子邮箱可以使用";
					} else {
						div_umail.style.color = "red";
						div_umail.innerHTML = "电子邮箱无效";
						bn_umail = false;
					}
				}
				return bn_umail;
			})	
			$(function func(){
				var bn_iname = $(function a(){});
				var bn_firstname = $(function b(){});
				var bn_uname = $(function c(){});
				var bn_upsw = $(function d(){});
				var bn_rpsw = $(function e(){});
				var bn_umail = $(function f(){});			
				return bn_iname&&bn_firstname&&bn_uname&&bn_upsw&&bn_rpsw&&bn_umail;
			})		
		})
		
	</script>

</html>

shop.html

<%@  include file="loginControl.jsp" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.q{
				background-color: #008F68;
				text-align: center;
				height: 100px;
				width: 1900px;
				color: white;
				text-align: left;
				
			}
			.w{
				text-align: left;
				padding: 10px;
			
				
			}
			.e{
				padding-left: 1px;
				color: #008F68;
				font-size: 20px;
			}
			.r{
			font-size: 15px;
			padding: 10px;
			}
				div ul li{
			width: 120px;
			height: 40px;
			background-color: #008F68;
			margin-bottom: 2px;
			font-family:"STCaiyun";
			text-align: center;
			line-height: 40px;
		}
		div ul li:hover{
			background-color: #B8E0D5;
		}
		.box{
				width: 1800px;
				height: 210px;
				padding-right: 100px ;
			    padding-top:210px;
				animation:myColor 10s infinite alternate;
			}
			@keyframes myColor{
				from{background: url(img/4.bmp);}
				to{background: url(img/5.bmp);}
				to{background: url(img/2.bmp);}
			}
			.t{
				width: 1800px;
				height: 900px;
				padding-left: 50px;
				
			}
		</style>
	</head>
	
	<body>
	<table class="q">
			<tr>
			<td><img src="img/1.bmp"/></td>
			<td class="w">首页</td>
			<td class="w">关于我们</td>
			<td class="w">公司动态</td>
			<td class="w">产品专区</td>
			<td class="w">客户服务</td>
			<td class="w">联系我们</td>
			<td class="w"><a href="login.html" >登陆</a>|<a href="register.html">注册</a></td>
			<td class="w"><img src="img/2.bmp"/></td>
			</tr>
	</table>
	<img src="img/3.bmp" style="width: 1900px;"/>
	<h1 class="e">产品专区</h1>
	
	<hr style="border: 1px dashed #blue;" align="left"width="700px" />
	<table>
	<tr>
		<td>
	<div>
	<ul>
	<li >
		<a >&nbsp;全部产品</a>
	</li>
	<li>
		<a>1.功效系列</a>
	</li>
	<li>
		<a>2.祛痘洁面</a>
	</li>
	<li>
		<a>3.多元修护系列</a>
	</li>
	<li>
		<a>4.玫瑰驻颜系列</a>
	</li>
	<li>
		<a>5.水润凝萃保湿</a>
	</li>
	<li>
		<a>6.金虎尾果系列</a>
	</li>
	<li>
		<a>7.面膜系列</a>
		
	</li>
	<li>
		<a>8.润肤隔离系列</a>
	</li>
	<li>
		<a>9.洗护系列</a>
	</li>
	</ul>
	
	</div>
	</td>
	<td>
		<div class="box"></div>
		</td>
		</table>
		<img src="img/6.bmp" />
		<table border="1px"  class="t">
			<tr>
				<td title="详细信息"><img class="i" src="img/图片购买/999.jpg">
				<input class="addition" type="button" name="999" value="+"/>
				<input type="text" value="0" id="999"/>
				<input class="subtraction" type="button" name="999" value="-"/>
				<input class="submission" type="submit" name="999" value="提交购物车"/>
				<input class="check" type="submit" name="999" value="查看购物车"/></td>
				<td title="详细信息"><img class="i" src="img/图片购买/999感冒灵.jpg">
				<input class="addition" type="button" name="999感冒灵" value="+"/>
				<input type="text" value="0" id="999感冒灵"/>
				<input class="subtraction" type="button" name="999感冒灵" value="-"/>
				<input class="submission" type="submit" name="999感冒灵" value="提交购物车"/>
				<input class="check" type="submit" name="999感冒灵" value="查看购物车"/></td>
				<td title="详细信息"><img class="i" src="img/图片购买/安神补脑液.jpg">
				<input class="addition" type="button" name="安神补脑液" value="+"/>
				<input type="text" value="0" id="安神补脑液"/>
				<input class="subtraction" type="button" name="安神补脑液" value="-"/>
				<input class="submission" type="submit" name="安神补脑液" value="提交购物车"/>
				<input class="check" type="submit" name="安神补脑液" value="查看购物车"/></td>
				<td title="详细信息"><img class="i" src="img/图片购买/欧兰宁.jpg">
				<input class="addition" type="button" name="欧兰宁" value="+"/>
				<input type="text" value="0" id="欧兰宁"/>
				<input class="subtraction" type="button" name="欧兰宁" value="-"/>
				<input class="submission" type="submit" name="欧兰宁" value="提交购物车"/>
				<input class="check" type="submit" name="欧兰宁" value="查看购物车"/></td>
				<td title="详细信息"><img class="i" src="img/图片购买/奥拉西坦胶囊.jpg">
				<input class="addition" type="button" name="奥拉西坦胶囊" value="+"/>
				<input type="text" value="0" id="奥拉西坦胶囊"/>
				<input class="subtraction" type="button" name="奥拉西坦胶囊" value="-"/>
				<input class="submission" type="submit" name="奥拉西坦胶囊" value="提交购物车"/>
				<input class="check" type="submit" name="奥拉西坦胶囊" value="查看购物车"/></td>
				<td title="详细信息"><img class="i" src="img/图片购买/板蓝根.jpg">
				<input class="addition" type="button" name="板蓝根" value="+"/>
				<input type="text" value="0" id="板蓝根"/>
				<input class="subtraction" type="button" name="板蓝根" value="-"/>
				<input class="submission" type="submit" name="板蓝根" value="提交购物车"/>
				<input class="check" type="submit" name="板蓝根" value="查看购物车"/></td>
			</tr>
			<tr>
				<td title="详细信息"><img class="i" src="img/图片购买/碧生源.jpg">
				<input class="addition" type="button" name="碧生源" value="+"/>
				<input type="text" value="0" id="碧生源"/>
				<input class="subtraction" type="button" name="碧生源" value="-"/>
				<input class="submission" type="submit" name="碧生源" value="提交购物车"/>
				<input class="check" type="submit" name="碧生源" value="查看购物车"/></td>
				<td title="详细信息"><img class="i" src="img/图片购买/德众鼻炎康片.jpg">
				<input class="addition" type="button" name="德众鼻炎康片" value="+"/>
				<input type="text" value="0" id="德众鼻炎康片"/>
				<input class="subtraction" type="button" name="德众鼻炎康片" value="-"/>
				<input class="submission" type="submit" name="德众鼻炎康片" value="提交购物车"/>
				<input class="check" type="submit" name="德众鼻炎康片" value="查看购物车"/></td>
				<td title="详细信息"><img class="i" src="img/图片购买/恩替卡韦片.jpg">
				<input class="addition" type="button" name="恩替卡韦片" value="+"/>
				<input type="text" value="0" id="恩替卡韦片"/>
				<input class="subtraction" type="button" name="恩替卡韦片" value="-"/>
				<input class="submission" type="submit" name="恩替卡韦片" value="提交购物车"/>
				<input class="check" type="submit" name="恩替卡韦片" value="查看购物车"/></td>
				<td title="详细信息"><img class="i" src="img/图片购买/惠氏.jpg">
				<input class="addition" type="button" name="惠氏" value="+"/>
				<input type="text" value="0" id="惠氏"/>
				<input class="subtraction" type="button" name="惠氏" value="-"/>
				<input class="submission" type="submit" name="惠氏" value="提交购物车"/>
				<input class="check" type="submit" name="惠氏" value="查看购物车"/></td>
				<td title="详细信息"><img class="i" src="img/图片购买/藿香正气胶囊.jpg">
				<input class="addition" type="button" name="藿香正气胶囊" value="+"/>
				<input type="text" value="0" id="藿香正气胶囊"/>
				<input class="subtraction" type="button" name="藿香正气胶囊" value="-"/>
				<input class="submission" type="submit" name="藿香正气胶囊" value="提交购物车"/>
				<input class="check" type="submit" name="藿香正气胶囊" value="查看购物车"/></td>
				<td title="详细信息"><img class="i" src="img/图片购买/金嗓子.jpg">
				<input class="addition" type="button" name="金嗓子" value="+"/>
				<input type="text" value="0" id="金嗓子"/>
				<input class="subtraction" type="button" name="金嗓子" value="-"/>
				<input class="submission" type="submit" name="金嗓子" value="提交购物车"/>
				<input class="check" type="submit" name="金嗓子" value="查看购物车"/></td>
			</tr>
			<tr>
				<td title="详细信息"><img class="i" src="img/图片购买/康恩贝.jpg">
				<input class="addition" type="button" name="康恩贝" value="+"/>
				<input type="text" value="0" id="康恩贝"/>
				<input class="subtraction" type="button" name="康恩贝" value="-"/>
				<input class="submission" type="submit" name="康恩贝" value="提交购物车"/>
				<input class="check" type="submit" name="康恩贝" value="查看购物车"/></td>
				<td title="详细信息"><img class="i" src="img/图片购买/抗骨增生.jpg">
				<input class="addition" type="button" name="抗骨增生" value="+"/>
				<input type="text" value="0" id="抗骨增生"/>
				<input class="subtraction" type="button" name="抗骨增生" value="-"/>
				<input class="submission" type="submit" name="抗骨增生" value="提交购物车"/>
				<input class="check" type="submit" name="抗骨增生" value="查看购物车"/></td>
				<td title="详细信息"><img class="i" src="img/图片购买/莲花清瘟胶囊.jpg">
				<input class="addition" type="button" name="莲花清瘟胶囊" value="+"/>
				<input type="text" value="0" id="莲花清瘟胶囊"/>
				<input class="subtraction" type="button" name="莲花清瘟胶囊" value="-"/>
				<input class="submission" type="submit" name="莲花清瘟胶囊" value="提交购物车"/>
				<input class="check" type="submit" name="莲花清瘟胶囊" value="查看购物车"/></td>
				<td title="详细信息"><img class="i" src="img/图片购买/美莎.jpg">
				<input class="addition" type="button" name="美莎" value="+"/>
				<input type="text" value="0" id="美莎"/>
				<input class="subtraction" type="button" name="美莎" value="-"/>
				<input class="submission" type="submit" name="美莎" value="提交购物车"/>
				<input class="check" type="submit" name="美莎" value="查看购物车"/></td>
				<td title="详细信息"><img class="i" src="img/图片购买/欧兰宁.jpg">
				<input class="addition" type="button" name="欧兰宁" value="+"/>
				<input type="text" value="0" id="欧兰宁"/>
				<input class="subtraction" type="button" name="欧兰宁" value="-"/>
				<input class="submission" type="submit" name="v" value="提交购物车"/>
				<input class="check" type="submit" name="欧兰宁" value="查看购物车"/></td>
				<td title="详细信息"><img class="i" src="img/图片购买/脑白金.jpg">
				<input class="addition" type="button" name="脑白金" value="+"/>
				<input type="text" value="0" id="脑白金"/>
				<input class="subtraction" type="button" name="脑白金" value="-"/>
				<input class="submission" type="submit" name="脑白金" value="提交购物车"/>
				<input class="check" type="submit" name="脑白金" value="查看购物车"/></td>
			</tr>
		</table>
	<img src="img/7.bmp" />
	</body>
	<script type="text/javascript" src="js/jquery.js" charset"UTF-8"></script>
<script type="text/javascript">
$(function(){
	$(".addition").click(function(){
		var val=$(this).attr("name");
		var num=$("#"+val).val();
		num++;
		$("#"+val).val(num);
		//alert($("#"+val).html(num));
	});
	$(".subtraction").click(function(){
		var val=$(this).attr("name");
		var num=$("#"+val).val();
		if(num>=1){
			num--;};
		$("#"+val).val(num);
	});
	$(".submission").click(function(){
		var val=$(this).attr("name");
		var num=$("#"+val).val();
		if(num>0){
			//提交到数据库
			location.href="drugsShopServlet?drugs_name="+name;
			
		}
	});
	$(".check").click(function(){
		var val=$(this).attr("name");
		var num=$("#"+val).val();
		//提交到数据库
			window.open('弹出的购物车.html?num='+num,'购物车','height=800,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
		
	});
	$(".i").hover(function(){
	$.ajax({
				type:"post",
				url:"drugsShowServlet",
			 	dataType:"json",
				success:function(data){
					
					var line = "<tr><td>药品名称</td><td>药品价格</td><td>药品数量</td><td>小计</td></tr>";
					var books = getMsg(data.list);
					  for(var i = 0 ; i<books.length;i++){
						line += "<tr>";
						line += "<td>"+books[i].drugs_name+"</td>"
						line += "<td>"+books[i].drugs_component+"</td>"
						line += "<td>"+books[i].drugs_curativeEffect+"</td>"
						line += "<td>"+books[i].drug_contraindication+"</td>"
						line += "<td>"+books[i].drugs_price+"</td>"
						line += "</tr>";
					}
					 // json each遍历 
					 //  a 数组  a 索引   JSONArray
					//   a 对象  a K   JSONObject 
					 //  b 当前对象 
					
					 //$.each(data,function(a,b){
					//	alert(a);
						//alert(b);
					//})  
					$("#"+id).attr("title",line);
					$(document).attr("title",line);
				}
			})
		
	},function(){
		
	});
}); 
</script>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值