JavaScript与Ajax开发课程设计

HIS医院预约挂号系统

题目要求：

写一个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

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