【经验总结】记一次艰难的居中－－日历榜单

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

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

我公司网站颜值比较高~

日历

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

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

两个坑：
日期方法中的月份是从0算起，所以参数要－1；
我们按照31每月做循环，但是因为就算当月没有31号，也可以用getDay拿到‘31号’星期数，所以还要进行一次判断。

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。

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