JavaScript与Ajax开发课程设计

题目要求：

写一个HIS系统界面，要求的功能（从患者角度操作）：

注册/登录功能

挂号（选择科室，医生）

查看病历

查看药方

要求用到的技术：

css用来对页面进行格式设置

jquery的事件操作

ajax读取json数据（仅用GET方法）

)

设计代码

界面布局大致是参考网上的，如有相似不要介意。下面代码不包括css、js。

<div class="header" id="head">
			<div class="title">HIS医院挂号预约系统</div>
		</div>
		
		<div class="wrap" id="wrap">
			<img src="img/Login0 .jpg" width="100%" height="600px"/>
			<div class="logGet">
				<!--
                	作者：offline
                	时间：2020-05-25
                	描述：头部提示信息
                -->
				<div class="logD logDtip">
					&emsp;&emsp;<p class="p1">登录</p>
				</div>
				<!--
                	作者：offline
                	时间：2020-05-25
                	描述：输入框
                -->
                <div class="lgD">
                	<img src="img/logName.png" width="20" height="20" alt=""/>
                	<input type="text" id="userName" placeholder="请输入用户名"/>
                </div>
                <div class="lgD">
                	<img src="img/logPwd.png" width="20" height="20" alt=""/>
                	<input type="password" id="Password" placeholder="请输入密码"/>
                </div>
                <div class="logC">
				<a href="#" class="btn_login"><button>登 录</button></a>
			    </div>
			</div>
		</div>
		
		<div class="footer" id="foot">
			<div class="copyright">
				<p>JavaScript与Ajax开发</p>
				<div class="img">
					<i class="icon"></i><span>联系邮箱：2420611101@qq.com</span>
				</div>
				<div class="img">
					<i class="icon1"></i><span>联系地址：南华大学</span>
				</div>
			    <div class="img">
			    	<i class="icon2"></i><span>联系电话：15580287582</span>
			    </div>
			</div>
		</div>

设计主界面的代码（不包括css和js）

<div class="title">欢迎进入HIS医院挂号预约系统</div>
			<div class="mainmenu">
				<div class="jianjie">
					<font style="font-family: '宋体';position: relative; color: white;">
						<b>&emsp;&emsp;本系统是个人完成，存在许多不足，部分功能没有开放。</b>
					</font>
				</div>
				<div class="jiange"></div>
				<div class="zhanshi">
					<img src="img/Login0 .jpg" />
				</div>
				<div class="jiange"></div>
				<div class="btn1" onclick="alert('该功能未实现');">
					<img src="img/bangding.png" width="50" height="50" style="margin-top: 10%;margin-left: 28%;margin-right: 28%;"/>
					<font style="font-family: '宋体';position: relative;left: 33%;color: white;font-size: 20px;"><b>绑定</b></font>
				</div>
				<div class="jiange"></div>
				<div class="btn2" onclick="alert('该功能未实现');">
					<img src="img/bangding.png" width="50" height="50" style="margin-top: 10%;margin-left: 28%;margin-right: 28%;"/>
					<font style="font-family: '宋体';position: relative;left: 33%;color: white;font-size: 20px;"><b>解绑</b></font>
				</div>
				
				<div class="hangju"></div>
				<div class="btn3" onclick="openDiv()">
					<img src="img/yuyue.png" width="50" height="50" style="margin-top: 5%;margin-left: 40%;margin-right: 40%;"/>
					<font style="font-family: '宋体';position: relative;left: 34%;color: white;font-size: 20px;"><b>我的预约</b></font>
				</div>
				<div class="jiange"></div>
				<div class="btn4" onclick="openDiv1()">
					<img src="img/guahao.png" width="50" height="50" style="margin-top: 5%;margin-left: 40%;margin-right: 40%;"/>
					<font style="font-family: '宋体';position: relative;left: 34%;color: white;font-size: 20px;"><b>我的挂号</b></font>
				</div>
				<div class="jiange"></div>
				<div class="btn5" onclick="alert('该功能未实现');">
					<img src="img/houzhen.png" width="50" height="50" style="margin-top: 5%;margin-left: 40%;margin-right: 40%;"/>
					<font style="font-family: '宋体';position: relative;left: 34%;color: white;font-size: 20px;"><b>我的候诊</b></font>
				</div>
				
				<div class="hangju"></div>
				<div class="btn6" onclick="alert('该功能未实现');">
					<img src="img/shezhi.png" width="50" height="50" style="margin-top: 10%;margin-left:32%;margin-right: 28%;"/>
					<font style="font-family: '宋体';position: relative;left: 33%;color: white;font-size: 20px;"><b>设置</b></font>
				</div>
				<div class="jiange"></div>
				<div class="btn7" onclick="alert('该功能未实现');">
					<img src="img/kefu.png" width="50" height="50" style="margin-top: 10%;margin-left: 28%;margin-right: 28%;"/>
					<font style="font-family: '宋体';position: relative;left: 33%;color: white;font-size: 20px;"><b>客服</b></font>
				</div>
				<div class="jiange"></div>
				<div class="btn8" onclick="alert('该功能未实现');">
					<img src="img/bingli.png" width="50" height="50" style="margin-top: 5%;margin-left: 40%;margin-right: 40%;"/>
					<font style="font-family: '宋体';position: relative;left: 34%;color: white;font-size: 20px;"><b>我的病历</b></font>
				</div>
				<div class="jiange"></div>
				<div class="btn9" onclick="alert('该功能未实现');">
					<img src="img/yaofang.png" width="50" height="50" style="margin-top: 5%;margin-left: 40%;margin-right: 40%;"/>
					<font style="font-family: '宋体';position: relative;left: 34%;color: white;font-size: 20px;"><b>我的药方</b></font>
				</div>
			</div>

废话不多说，上资源：
链接：网盘链接
提取码：qjoq

由于时间关系，大部分功能暂时没有开放，后期会找时间参漏补缺。希望大家谅解！！！！！！