老师，我有几个问题关于值班表的

首页课程实战体系课手记专栏慕课教程

老师，我有几个问题关于值班表的

来源：5-12 项目作业

Darkholme

2020-07-05 23:23:52

首先麻烦老师了，问题如下

星期和时间undefined和NaN了，不知道什么原因。
约满等那些值班表中间的元素不知道该怎么设置css才能和作业要求一样排列。
点了左箭头把值班表往左滑动后，左箭头就被值班表挡住了，也不知道该在哪设置清除溢出，已经晕了。。。

<!DOCTYPE html>

<html>

<head>

padding: 0;

margin: 0;

}

text-decoration: none;

}

.top{

width: 100%;

min-width: 60%;

height: 30px;

line-height: 30px;

font-size: 12px;

background: #f5f5f5;

}

.top a{

float: left;

display: block;

color: #868686;

}

.top-number{

background:url(http://climg.mukewang.com/58c61b9d0001e02d00170017.png) no-repeat left center;

text-indent: 20px;

margin-left: 12%;

}

.top-welcome{

margin-left: 37%;

}

.top .top-register{

color: #2da5e1

}

.head{

width: 100%;

min-width: 60%;

}

.wrap_head{

margin:0 auto;

width: 80%;

min-width: 40%;

height: 90px;

line-height: 90px;

}

.head-logo{

background:url(http://climg.mukewang.com/58c61b2f0001f5c008400172.png) no-repeat left center;

background-size: 450px 90px;

}

.head-search{

width: 32%;

min-width: 32%;

max-width: 32%;

height: 40px;

line-height: 40px;

background: url(http://climg.mukewang.com/58c61b7e00012b9303260038.jpg) no-repeat;

background-size: 100%;

float: right;

margin-right: 10%;

margin-top: -5.5%;

}

.search-select{

font-size: 18px;

color:white;

outline: none;

border:none;

background: #fec009;

width: 19%;

max-width: 19%;

margin-left: 1%;

}

.head-search-input{

font-size: 16px;

outline: none;

border:none;

margin-left: 5%;

}

.wrap_navigator{

width: 100%;

max-width: 100%;

height: 38px;

line-height: 38px;

background: #60bff2;

}

.wrap_navigator .navigator{

width: 80%;

max-width: 80%;

margin:0 auto;

}

.wrap_navigator a{

display: block;

float: left;

margin:0 1%;

padding: 0 10px;

color:white;

}

.wrap_navigator .navigator .navigator-right{

margin-left: 27%;

}

.wrap_navigator a:hover{

background-color: #1fa4f0;

}

/*网页主体*/

.wrap_main{

width: 80%;

margin: 0 auto;

height: auto;

}

/*医院简介*/

.main-abstract{

width: 100%;

height: 260px;

margin: 30px 0;

padding: 0 20px;

background-color: #f7f7f7;

}

.main-abstract-head{

height: 49px;

line-height: 49px;

color: #2d2d2d;

font-size: 20px;

font-weight: bold;

border-bottom: 1px solid #e2e2e2;

}

.main-abstract-head a:nth-child(1){

font-size: 16px;

color: #f1b951;

}

.main-abstract-head a:nth-child(2){

font-size: 14px;

color: #5f58f7;

margin-left: 548px;

}

.main-abstract-head a:nth-child(2) i{

color: black;

}

.main-abstract-body{

overflow: hidden;

position: relative;

}

.main-abstract-body-img1{

position: absolute;

height: 180px;

left:0;

bottom: 24px;

width: 20%;

background:url(../image/hospital-1.jpg) no-repeat left center;

}

.main-abstract-body-content{

width: 650px;

margin:0 auto;

}

.main-abstract-body-content a{

position: relative;

display: block;

margin: 15px 0;

font-size: 14px;

color: #9d9d9d;

text-indent: 16px;

}

.main-abstract-body-content a::before{

position: absolute;

left: -5px;

display: block;

content: "";

width: 16px;

height: 16px;

background:url(../image/icon-web.png) no-repeat;

}

.main-abstract-body-content a:nth-child(2):before{

background-position-y: -22px;

}

.main-abstract-body-content a:nth-child(3):before{

background-position-y: -44px;

}

.main-abstract-body-content a:nth-child(4):before{

background-position-y: -63px;

}

.main-abstract-body-img2{

position: absolute;

height: 210px;

right: 0;

width: 30%;

top: -5px;

background:url(../image/map-1.png) no-repeat right center;

background-size: 13em;

}

.schedule-title{font-weight: bolder;}

.schedule-title a{

font-size: 14px;

color: #60bff2

}

.schedule-body{

position: relative;

height: 390px;

width: 100%;

border: 1px solid #9c9c9c;

border-collapse: collapse;

margin-top: 20px;

}

.parallax{

position: relative;

width: 75%;

height:324px;

float: left;

border: 1px solid #9c9c9c;

overflow: hidden;

}

.schedule-body textarea{

width: 24%;

height:324px;

float: right;

resize: none;

outline: none;

border:none;

}

.parallax .status,

.parallax .status_right{

background-color: #f1f9ff;

width: 45px;

height: 92px;

line-height: 90px;

text-align: center;

border-top: 1px solid #9c9c9c;

overflow: hidden;

}

.arrow_right,

.status_right{

position: absolute;

right: 0;

top:0;

}

.status_right{

padding-bottom: 231px;

}

.arrow_left,

.arrow_right{

display: block;

height: 45px;

width: 45px;

cursor: pointer;

z-index: 9;

overflow: hidden;

}

.arrow_left{

background:url(../image/icon-scheduling-left.jpg) no-repeat center center;

}

.arrow_right{

background-size: cover;

background: white url(../image/icon-scheduling-right.jpg) no-repeat center center;

}

.schedule-body h4{

position: absolute;

height: 62px;

line-height: 62px;

color: #9c9c9c;

text-indent: 28px;

font-weight: normal;

bottom: 0;

left: 438px;

}

.schedule-body h4::before{

display: block;

position: absolute;

width: 20px;

height: 20px;

content: '';

background: url(../image/icon-info.jpg) no-repeat center center;

bottom: 21px;

}

.schedule-body .parallax-body{

position: absolute;

left: 46px;

right: 0;

top: 0;

width: 99999px;

height: 326px;

transition: all 1s;

overflow: hidden;

}

.date{

float: left;

height: 46px;

width: 80px;

font-size: 14px;

text-align: center;

border-left: 1px solid #9c9c9c;

}

.status-item{

position: absolute;

border-top: 1px solid #9c9c9c;

display: block;

width: 80px;

height: 92px;

text-align: center;

line-height: 92px;

}

.status_full{

position: absolute;

border-top: 1px solid #9c9c9c;

display: block;

background-color: #f1f9ff;

height: 92px;

width: 80px;

}

.foot{

height: 70px;

width: 100%;

max-width: 100%;

background-color: #eceef2;

line-height: 70px;

text-align: center;

}

.foot a{

color: #acacac;

}

.backTop{

position: fixed;

background: black url(http://climg.mukewang.com/58c61bb900013e2c00230023.png) no-repeat;

background-size: 40px 40px;

width: 40px;

max-width: 40px;

max-height: 40px;

height: 40px;

right: 5px;

bottom:10px;

cursor: pointer;

}

</style>

</head>

<body>

<a class="top-welcome" href="javascript:void(0);">欢迎来到城市预约挂号统一平台   请      </a>

</div>

</select>

</div>

<a href="javscript:void(0);">按医院挂号</a>

<a href="javscript:void(0);">按科室挂号</a>

<a href="javscript:void(0);">按疾病挂号</a>

<a class="navigator-right" href="javscript:void(0);">社会知名医院</a>

</div>

北京协和医院

<a href="javascript:void(0);">等级：<i>三级甲等区域</i>     区域：<i>东城区</i>    分类：<i>中国医科院所属医院</i></a>

</div>

<a href="javascript:void(0);">【东院】北京市东城区帅府园一号【西院】北京市西城区大木仓胡同41号</a>

<a href="http://www.punch.cn/">http://www.punch.cn/</a>

<a href="javascript:void(0);">东院咨询台：010-69155564；西院咨询台：01069158004</a>

<a href="javascript:void(0);">东院：106,108,110,111,116,684,685到东单路口北；41,104快，814到东单路口南；1,52,728,802到东单路口西；20,25,37,39，到东单路口东；103，104,420，803到新东安市场；地铁1,5号线到东单>西院：68到比才胡同东口；更多乘车路线详见须知</a>

</div>

</div>

<p class="schedule-title">科室排列表     <a href="javascript:void(0);">返回科室列表</a></p>

</div>

</div>

预约周期:7天

放号时间：8:30

停挂时间：下午14:00停止次日预约挂号（周五14:00后停挂至下周一）

退号时间：就诊前一工作日14:00前取消

特殊规则：1. 取号地点不同：西院区预约号取号地点：西院区门诊楼一层大厅挂号窗口取号。动员去预约号取号地点：东园区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号、收费窗口取号。

</textarea>

<h4>您还没有选择就诊日期</h4>

</div>

</footer>

$('.schedule-title a').on('click',function(){

$(window).attr('location',"index.html");

})

var week =['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];

$('#parallax-mainBody').empty();

//输出今天之后七个星期的班

var pageCount = 7; //一共七个星期排班表所以一共切换7个页

var days = pageCount * 7; //一个星期是7天，所以所有派班室7*7=49

var data = new Date();

var time = data.getTime();

for(i=0;i<days;i++) {//这里循环的就是排班一共的天数

var _t = time * i *86400 *1000;

var _d = new Date(_t);

var html =[];

var w = week[_d.getDay()];

var y = _d.getFullYear();

var m =_d.getMonth() * 1;

m = m<10 ? '0' + m :m;

var d = _d.getDate();

d = d<10 ? '0' + d :d;

//通过循环动态的把排班的html结构加入到页面中，因为处理的是一天的，所以需要通过多次循环把七个星期的全部添加进去

html.push('<div class="parallax-box-item"> <div class="date">' + w + '<br>' + y +'-' + m + '-' + d + '</div');

html.push('<div class="status-item"></div>'); //上午

html.push('<div class="status-item status_full">约满</div>'); //下午

html.push('<div class="status-item"></div></div>'); //晚上

$('#parallax-mainBody').append(html.join(''));

}

//获取滚动条left值

var left = $('.parallax-body').css('left');

//左箭头点击事件通过减去left值向左滚动

$('#arrow_left').on('click',function(){

$('.parallax-body').css('left','-=812');

left = (parseInt(left) - 812) + 'px';

});

//右箭头点击事件和左箭头方向相反

$('#arrow_right').on('click',function(){

if(left == '46px'){

$('.parallax-body').css('left','+=0');

}else{

$('.parallax-body').css('left','+=812');

left = (parseInt(left) + 812) + 'px';

}

});

</script>

</body>

</html>

写回答

2回答

好帮手慕糖

2020-07-06

已采纳

同学你好，关于你的问题，回答如下：

1、应该是time加上一天的毫秒数，不是乘以哦，例：

2、可以参考以下修改：

（1）如下，最后结束的div，缺少“>”

（2）先在html中放一天的布局。

（3）然后设置这一天的样式。

（4）同学的这个整体布局是有点问题，整体的布局需要修改下哦，可以参考如下：

① 如下，分为左中右三部分

②中间部分，外层的盒子设置一个星期存放的，设置超出隐藏。然后里面嵌套一个特别大的大盒子，存放7个星期的天数。

③之后在设置参考上面的，现在html中书写一天的，然后设置样式哦。

同学可以动手操作下哦。

祝学习愉快~

harkholme

h 老师我把问题都解决了，可是我发现了个Bug不知道怎么办，就是当点击箭头滑动值班日期的时候，因为值班日期有个transition:all 1s;的属性，所以如果连续点击箭头不停滑动，就会把1s变化时间的时间间隔中点击箭头对Left属性的变化也算进去。可能是我的箭头点击事件写的不够严谨，您可以帮我看一下吗？ //获取滚动条left值 var left = $('.parallax-body').css('left'); //左箭头点击事件通过减去left值向左滚动 $('#arrow_left').on('click',function(){ if(parseInt(left) == '-3248'){ $('.parallax-body').css('left','-=0'); }else{ $('.parallax-body').css('left','-=812'); left = (parseInt(left) - 812) + 'px'; } }); //右箭头点击事件和左箭头方向相反 $('#arrow_right').on('click',function(){ if(parseInt(left) == '0'){ $('.parallax-body').css('left','+=0'); }else{ $('.parallax-body').css('left','+=812'); left = (parseInt(left) + 812) + 'px'; } });

h020-07-06

共2条回复

好帮手慕糖

2020-07-06

同学你好，可以新建个问题，将修改好的代码全部粘贴过来，描述下问题。老师再测试下哦。以保证准确的帮助同学解决哦。

祝学习愉快~