【經驗總結】記一次艱難的居中－－日曆榜單

距離上次發佈面試經歷已經有一個多月，工做也有小一個月，一直沒抽空整理工做中遇到的問題。今天本菜鳥解決了一個比較棘手的任務（棘手是對於菜鳥的，大大們能夠直接點叉叉了~

在我上班一個半星期以後，公司給我安排了一個日曆功能，就像這樣 →

我公司網站顏值比較高~

日曆

起初最讓我擔憂的是生成每個月日曆，在大神男友的幫助下，獲得了生成日曆的方法。

第一個方法是生成對象數組，數組的每一項都記錄了當前星期的星期與日期的對應，好比說十月從第一個星期算起應該是[{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。

內容很簡單，小菜鳥繼續滾去學習了～～～