距离上次发布面试经历已经有一个多月，工作也有小一个月，一直没抽空整理工作中遇到的问题。今天本菜鸟解决了一个比较棘手的任务（棘手是对于菜鸟的，大大们可以直接点叉叉了~

在我上班一个半星期之后，公司给我安排了一个日历功能，就像这样 →

我公司网站颜值比较高~

日历

起初最让我担心的是生成每月日历，在大神男朋友的帮助下，得到了生成日历的方法。

第一个方法是生成对象数组，数组的每一项都记录了当前星期的星期与日期的对应，比如说十月从第一个星期算起应该是[{4:1,5:2,6:3},{0:4,1:5,2:6,3:7,4:8,5:9,6:10}...]

两个坑：

function createCalendar(year, month){    var calendar = [{}];    var newdate = new Date();    for(var i = 1; i <= 31; i++){        newdate.setFullYear(year, +month - 1, i);        // 月份还没有结束        if(newdate.getDate() === i){            calendar[calendar.length-1][newdate.getDay()] = i;            // 这里是新的一周            if(newdate.getDay() === 6){                calendar.push({});            }        }    }    return calendar;}

得到这个数组之后，就要考虑怎么将数组放到table里面。拿到上面方法的数组对象，就可以用两层循环放到表格中。

function calendarToDOM(calendar,year,month){    var tbody = document.querySelector('.calendar tbody');    for(var i = 0; i < calendar.length; i++){        var tr = document.createElement('tr');        for(var j = 0; j < 7; j++){            var td = document.createElement('td');            if (calendar[i][j]){                /* content */            }            tr.appendChild(td);        }        tbody.appendChild(tr);    }}

垂直居中

垂直居中的多种方法，大神们已经整理过很多了，小菜鸟就不多赘述了。一行居中可以用line-height，绝对定位的固定行数居中可以设置margin和top。而这里，因为显示行数可变，所以我用了table-cell。

我站颜值比较高，这个这一小格<td>上，有很多层：1.用来显示图片的背景层，2.用来标注日期的绝对定位层，3.用来显示作品信息的居中层，4.hover效果的遮罩层。。。如下图 →

其实我大神男友曾多次提醒我，absolute就是坑，然而我还是得往坑里扎。图片背景，日期还有hover都是用的absolute。但是table-cell与absolute犯冲（其实和float也犯冲），所以显示作品的居中层用了position:relative。

.novel-detail {        width: 151px;        height: 150px;        text-align: center;        position: relative;        display: table-cell;         vertical-align: middle;  }.novel-center {    display: inline-block;    padding: 0 10px;}

但是事情并不能总是如愿，因为当我设置好了这些，又出了让人不爽的情况。从没设过<td>边距的我，这里中间内容竟然会被挤压。

在我强制padding和margin为0之后，这个诡异的边距竟然还在。最后我在<td>上多加了一条规则：

border-collapse: collapse;

小结

Date()对象方法两个坑，一个是月份从0算到11，二是getDate中即使传入当月没有的日期入（9月31）也能返回星期。

垂直居中的方法，对付不定高的内容，使用table-cell，但不要同时使用absolute或float。表格的边距，使用border-collapse。

内容很简单，小菜鸟继续滚去学习了～～～