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

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

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

我公司网站颜值比较高~

日历

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

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

我站颜值比较高,这个这一小格上,有很多层: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;
}

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

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

border-collapse: collapse;

小结

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

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

内容很简单,小菜鸟继续滚去学习了~~~

你可能感兴趣的:(网页表格,垂直居中,日历,前端)