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

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

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

我公司网站颜值比较高~

日历

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

第一个方法是生成对象数组，数组的每一项都记录了当前星期的星期与日期的对应，好比说十月从第一个星期算起应该是[{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。

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