1回答

好帮手慕夭夭

2018-12-05

已采纳

你好同学 , 老师提供一个思路给你参考 :

获取的排班（即星期的显示）不是从今天（获取当前日期）之后7个星期的排班

 

如上红框中属于js动态添加的数据 , 所以html只编写最外层的结构 . html结构如下 :

css样式:

1.    排班表的盒子schedule_box设置固定宽度,如下658px,并设置   overflow: hidden;

2.    因为里层的盒子schedule_box_wrap需要放七个星期的排班 ,所以需要设置宽一些 , 并设置定位 ,如下

盒子父元素因为设置了overflow: hidden; ,所以宽度超出的会隐藏 . 这样设置了定位后 ,在js中点击按钮去改变left值 , 值就是一个星期的宽度 , 这样就能点击按钮切换不同星期的显示了

其他的样式自己根据效果图完善一下哦

js :

获取当前系统日期 , 使用for遍历(长度不超过从系统当前日期之后的七个星期) ,然后在循环中处理当前日期之后7个星期的排班.然后结合append在页面添加日期html结构.

以下为参考的代码 ,不作为标准答案 , 提供给同学作为思路参考 .希望同学不要照搬照抄 . 能够自己理清思路 ,独立实战 .如果同学在实战的过程中有自己的思路  ,老师鼓励按照自己的思路去实现效果 ,更能帮助自己成长哦 .,加油 !

因为在css中为日期盒子设置了定位 ,所以在js中可以给两边的三角按钮绑定点击事件. 点击切换上一张下一张的按钮 ,可以通过改变left的值去实现排班表的切换哦

实战一下吧 , 祝学习愉快 ,望采纳 .

0