关于医院页面分页的科室排班表
来源：5-12 项目作业
soso_crazy
2019-04-12 15:56:25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/分院.css" type="text/css">
<link href="../css/ui.css" type="text/css" rel="stylesheet" />
<title>分院</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="top">
<div id="top" class="top">
<div class="wrap">
<p class="call">010-114/116114电话预约</p>
<p class="welcome">欢迎来到城市医院预约挂号统一平台 请
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">帮助中心</a>
</p>
</div>
</div>
</div>
<header>
<div class="wrap">
<a href="#"><img src="../图片素材/logo.png"></a>
<div class="search ui-search">
<div class="ui-search-select">医院</div>
<div class="ui-search-select-list">
<a href="#1" class="search-choice">科室</a>
<a href="#1" class="search-choice">疾病</a>
<a href="#1" class="search-choice">医院</a>
<input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">
<a href="#" class="ui-search-submit"> </a>
</div>
</div>
</div>
</header>
<nav>
<div class="wrap">
<a href="#" class="link">首页</a>
<a href="hospital.html" class="link">按医院挂号</a>
<a href="#" class="link">按科室挂号</a>
<a href="#" class="link">按疾病挂号</a>
<a href="#" class="link">最新公告</a>
<a href="#" class="link right">社会知名医院</a>
</div>
</nav>
<section class="hospital wrap">
<div class="beiH">
<p>
<span>北京协和医院</span><span>关注医院</span>
</p>
<p>
<span>等级：</span><span>三级甲等</span>
<span>区域：</span><span>东城区</span>
<span>分类：</span><span>中国医科所属医院</span>
</p>
</div>
<div class="wrap">
<div class="cover">
<img src="../图片素材/hospital-1.jpg" alt="">
</div>
<div class="detail">
<div class="address">地址：北京市东城区东交民巷1号(西区)；北京市东城区崇文门内大街8号(东区)</div>
<div class="web">www.punch.com</div>
<div class="phone">电话：010-1234567</div>
<div class="bus">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et animi blanditiis ipsam eaque, minima molestiae deleniti enim pariatur, dolores quis unde inventore ab molestias eius beatae dolor eveniet error consequatur?</div>
</div>
<div class="map"><img src="../图片素材/map-1.png" alt=""></div>
</div>
</section>
<div class="scheduling wrap">
<div class="caption">科室排班表<a class="back" href="hospital_detail.html">返回科室列表</a></div>
<div class="table clearfix">
<div class="left schedule_main">
<div class="schedule_tool_left">
<div class="date">
<a href="#" class="icon"></a>
</div>
<div class="status">上午</div>
<div class="status">下午</div>
<div class="status">晚上</div>
</div>
<div class="schedule_box">
<div class="schedule_box_wrap clearfix" id="schedule_box_wrap">
</div>
</div>
<div class="schedule_tool_right">
<div class="date">
<a href="#" class="icon"></a>
</div>
<div class="status"></div>
<div class="status"></div>
<div class="status"></div>
</div>
</div>
<div class="right">
<div class="table">
<div class="h3">预约规则</div>
<dl><dt>预约周期：</dt>
<dd> 7天</dd>
</dl>
<dl><dt>放号时间：</dt>
<dd>8:30</dd>
</dl>
<dl><dt>停挂时间：</dt>
<dd>下午14:00停止次日预约挂号 （周五14:00后停挂至下周一）</dd>
</dl>
<dl><dt>退号时间：</dt>
<dd>就诊前一工作日14:00前取消</dd>
</dl>
<dl><dt>特殊规则：</dt>
<dd>
<p><br>① 取号地点不同：西院区预约号取号地点：西院区门诊楼一层大厅挂号窗口取号。东院区预约号取号地点：东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。<br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
</dd>
</dl>
</div>
</div>
</div>
<div class="bottom clearfix"><img src="../图片素材/icon-info.jpg"> 您还没有选择就诊日期</div>
</div>
<!-- 排班表 end -->
<script src="../js/ui-search.js"></script>
<!-- <script src="../js/schedule.js"></script> -->
<script src="../js/doctorSchedule.js"></script>
</body>
</html>
//分院.css
/* 通用设置 */
* {
margin: 0;
padding: 0;
}
.wrap {
margin: 0 auto;
width: 1200px;
position: relative;
}
a {
text-decoration: none;
}
select,
input {
border: none;
/*删除默认样式 点击时没有变化*/
outline: none;
/*删除默认样式 点击时没有变化*/
}
.clearfix {
content: " ";
display: block;
height: 0;
line-height: 0;
clear: both;
zoom: 1;
}
/* top区域 */
.top {
width: 100%;
height: 30px;
background-color: #f5f5f5;
}
/* top区域的左侧电话 */
.top .call {
background: url('../图片素材/icon-call.png') left no-repeat;
color: gray;
height: 30px;
line-height: 30px;
padding-left: 23px;
float: left;
}
/* top区域右侧的链接区域 */
.top .welcome {
float: right;
color: #868686;
height: 30px;
line-height: 30px;
}
.top .welcome a {
color: #2da5e1;
}
.top .welcome a:first-of-type {
padding-left: 27px;
}
.top .welcome a:nth-of-type(2) {
padding-left: 17px;
}
.top .welcome a:last-of-type {
padding-left: 78px;
}
.top .welcome a:first-of-type:hover,
.top .welcome a:nth-of-type(2):hover,
.top .welcome a:last-of-type:hover {
cursor: pointer;
}
/* header区域 */
header {
width: 100%;
height: 93px;
background-color: #ffffff;
}
header img {
width: 354px;
height: 61px;
margin: 18px 0;
}
header .search {
float: right;
width: 328px;
height: 40px;
border-radius: 5px;
background-color: #fecd09;
margin: 30px 0 25px 0;
}
/* nav区域 */
nav {
width: 100%;
height: 36px;
background-color: #2da5e1;
}
nav a {
color: #ffffff;
display: inline-block;
height: 36px;
line-height: 36px;
}
nav a:first-child {
padding-left: 54px;
padding-right: 56px;
}
nav a:nth-of-type(2),
nav a:nth-of-type(3),
nav a:nth-of-type(4),
nav a:nth-of-type(5) {
padding-left: 31px;
}
nav a:last-of-type {
position: absolute;
right: 0;
top: 0;
}
/* 医院介绍区域 */
.hospital {
height: 260px;
margin-top: 31px;
background-color: #EBEBEB;
}
/* 医院介绍的文字标题 */
.hospital .beiH {
padding: 15px;
}
.hospital div:first-child p {
display: inline-block;
}
.hospital div:first-child p:first-child span:nth-of-type(1) {
font-size: 18px;
color: #000000;
padding-right: 12px;
}
.hospital div:first-child p:first-child span:nth-of-type(2) {
font-size: 15px;
color: orange;
}
.hospital div:first-child p:nth-of-type(2) {
position: absolute;
right: 23px;
top: 17px;
}
.hospital div:first-child p:nth-of-type(2) span:nth-of-type(1),
.hospital div:first-child p:nth-of-type(2) span:nth-of-type(3),
.hospital div:first-child p:nth-of-type(2) span:nth-of-type(5) {
color: #4876FF;
padding-left: 13px;
}
/* 医院介绍的图片、文字、地图 */
.hospital div:last-child {
padding: 0 26px;
position: absolute;
}
.hospital .detail {
position: absolute;
width: 644px;
left: 240px;
top: 0;
}
.hospital .detail div {
padding-left: 30px;
padding-bottom: 10px;
}
/* 医院地图 */
.hospital .map {
position: absolute;
right: 50px;
top: 10px;
width: 250px;
height: 170px;
overflow: hidden;
}
.hospital .map img {
width: 250px;
height: 168px;
}
/* 医院的文字介绍地址电话...区域 */
.address,
.web,
.phone,
.bus {
position: relative;
color: #868686;
font-size: 15px;
}
.address::before {
position: absolute;
top: 5px;
left: 5px;
content: '';
width: 16px;
height: 20px;
background: url(../图片素材/icon-web.pn) center no-repeat;
background-position: 0 0;
}
.web::before {
position: absolute;
top: 3px;
left: 5px;
content: '';
width: 16px;
height: 20px;
background: url(../图片素材/icon-web.pn) center no-repeat;
background-position: 0 -20px;
}
.phone::before {
position: absolute;
top: 0px;
left: 5px;
content: '';
width: 16px;
height: 20px;
background: url(../图片素材/icon-web.png) center no-repeat;
background-position: 0 -40px;
}
.bus::before {
position: absolute;
top: 0px;
left: 5px;
content: '';
width: 16px;
height: 20px;
background: url(../图片素材/icon-web.png) center no-repeat;
background-position: 0 -60px;
}
/* 科室排班列表 */
.scheduling {
padding-bottom: 60px;
margin-top: 20px;
margin-bottom: 50px;
}
.scheduling .caption {
line-height: 50px;
text-indent: 10px;
}
.scheduling .caption .back {
font-size: 14px;
color: #00B3EC;
margin-left: 16px;
}
.scheduling .table {}
.scheduling .left {
width: 930px;
height: 324px;
float: left;
font-size: 12px;
}
.schedule_box_wrap,
.schedule_box {
width: 858px;
height: 324px;
float: left;
position: relative;
/*background-color: #ccc;*/
}
.schedule_box {
overflow: hidden;
}
.schedule_box_wrap {
width: 99999px;
transition: all 1s;
}
.schedule_box_wrap {
position: absolute;
left: 0;
top: 0;
}
.schedule_box_item {
width: 95px;
height: auto;
float: left;
}
.schedule_main {
text-align: center;
border-bottom: 1px solid #dcdddd;
position: relative;
}
.schedule_main .date {
color: #868686;
background: #f8fafc;
line-height: 18px;
height: 36px;
padding: 4px 0;
width: 94px;
border: 1px solid #dcdddd;
border-bottom: none;
border-right: none;
}
.schedule_main .status {
background: #fff;
width: 94px;
height: 92px;
line-height: 90px;
border: 1px solid #dcdddd;
border-bottom: none;
border-right: none;
cursor: pointer;
}
.schedule_main .schedule_box_item .status_full {
/*background-color: #fafafa;*/
background: #e0eefd;
cursor: pointer;
color: #4ab4ed;
}
.schedule_tool_right,
.schedule_tool_left {
width: 38px;
height: 324px;
float: left;
z-index: 2;
/*background-color: red*/
}
.schedule_main .schedule_tool_left .date,
.schedule_main .schedule_tool_right .date {
width: 100%;
line-height: 36px;
background-color: #fff;
}
.schedule_main .schedule_tool_left .status,
.schedule_main .schedule_tool_right .status {
width: 100%;
background-color: #f2f8ff;
}
.schedule_main .schedule_tool_left .status,
.schedule_main .schedule_tool_right .status {
border-top-color: #f2f8ff;
}
.schedule_main .schedule_tool_right {
position: absolute;
right: 1px;
top: 0;
}
.schedule_main .schedule_tool_right .status {
border-left: 1px solid #dcdddd
}
.schedule_tool_left .icon {
display: inline-block;
width: 32px;
height: 36px;
background: url(../图片素材/icon-scheduling-left.jpg) no-repeat -2px -6px;
}
.schedule_tool_right .icon {
display: inline-block;
width: 32px;
height: 36px;
background: url(../图片素材/icon-scheduling-right.jpg) no-repeat -2px -6px;
}
/*右侧内容*/
.scheduling .right {
width: 270px;
height: 324px;
float: right;
}
.scheduling .right .table {
border: 1px solid #dcdddd;
}
.scheduling .right .table {
padding: 10px 5px 10px 10px;
overflow: auto;
height: 303px;
border: 1px solid #dcdddd;
line-height: 18px;
}
.scheduling .right .table .h3 {
line-height: 40px;
}
.scheduling .right .table dl {
font-size: 12px;
padding-bottom: 5px;
color: #888;
overflow: hidden;
}
.scheduling .right .table dt {
display: inline-block;
font-size: 12px;
color: #555;
float: left;
width: 68px;
}
.scheduling .right .table dd {
display: inline-block;
float: left;
font-weight: normal;
width: 170px;
}
.scheduling .bottom {
color: #9f9f9f;
font-size: 16px;
height: 64px;
line-height: 64px;
text-align: center;
border: 1px solid #dcdddd;
border-top: none;
}
.scheduling .bottom img {
vertical-align: middle;
}
//ui.css
/* 搜索 */
.ui-search {
background: url(../图片素材/ui-search.jpg) center no-repeat;
font-size: 14px;
color: #fff;
position: relative;
}
.ui-search-select {
width: 70px;
height: 40px;
line-height: 40px;
position: absolute;
/*根据ui-search浮动*/
left: 0;
top: 0;
text-indent: 14px;
}
.ui-search-select-list {
display: none;
position: absolute;
width: 67px;
line-height: 24px;
background-color: #fff;
box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
left: 2px;
top: 39px;
z-index: 2;
}
.ui-search-select-list a {
display: block;
color: #A5a2a2;
text-align: center;
letter-spacing: .2em;
}
.ui-search-select-list a:hover {
background-color: #ebeef5;
}
.ui-search-input {
width: 208px;
height: 26px;
position: absolute;
top: -35px;
left: 73px;
line-height: 26px;
font-size: 13px;
color: #A5A2A2;
}
.ui-search-submit {
display: block;
position: absolute;
right: -260px;
top: -35px;
width: 40px;
height: 36px;
}
//js
$(document).ready(function() {
var week = "",
day = new Date().getDate(),
year = new Date().getFullYear(),
month = new Date().getMonth(),
weekend = new Date().getDay(),
pageCount = 10,
page = 0;
allScheduleDay = pageCount * 10;
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
switch (weekend) {
case 0:
week = "星期日";
break;
case 1:
week = "星期一";
break;
case 2:
week = "星期二";
break;
case 3:
week = "星期三";
break;
case 4:
week = "星期四";
break;
case 5:
week = "星期五";
break;
case 6:
week = "星期六";
break;
}
// 添加元素到html中
for (var i = 0; i < allScheduleDay; i++) {
$('#schedule_box_wrap').append('<div class="schedule_box_item"><div class="date">' + week + '<br>' + year + '-' + month + '-' + day + '</div><div class="status"></div><div class="status status_full">约满</div><div class="status"></div></div>');
}
// 点击按钮
var width = 0;
$('#schedule_box_wrap').on('moveLeft', function() {
$('#schedule_box_wrap').css('left', width + 455 + 'px');
});
$('#schedule_box_wrap').on('moveRight', function() {
$('#schedule_box_wrap').css('left', width - 455 + 'px');
});
$('.schedule_tool_left .icon').on('click', function() {
if (page > 0 && page <= pageCount) {
page -= 1;
$('#schedule_box_wrap').triggerHandler('moveLeft');
}
return false;
});
$('.schedule_tool_right .icon').on('click', function() {
if (page <= pageCount) {
page += 1;
$('#schedule_box_wrap').triggerHandler('moveRight');
}
return false;
});
});
老师，科室排班表的显示日期如何不是统一显示当天？
向左向右滑动的left值应该如何设置，思路是怎样的可以说一下吗？
1回答
-
好帮手慕糖
2019-04-12
同学你好，这里可以通过循环设置哦，之后没多一天就加1即可。整体可以参考如下：例：
（1） 先定义一个数组，将7天对应的星期几的都先写好。
（2） 作业要求是输入今天即当前日后之后的7个星期的排班。所以我们一共要计算7*7=49天
（3） 通过new date获取当前日期
（4） 当前日期+1天（可通过毫秒数计算），但我们需要的结果是年月日，所以将+1后的值通过new Date转化、然后在通过getDay()、getFullYear()、getMonth()获取符合我们常识的年月日。
（5） 从定义的数组中，取出对应的星期数
（6） 向页面中插入数据，插入数据的同时，还可以将包含数据的节点一起生成、插入dom中。可以不使用表格展示，div元素也可以的
（7） 以上为一天（即一个上午、下午、晚上、头部日期）的结构。循环49次即可
（8） 由于展示值班表的大盒子设置了超出部分隐藏、所以只会显示7天的情况。鼠标单击向后或者向前、动态改变left值或right值了。
希望能帮助到你，祝学习愉快！
0
相似问题