网页小配件之日历

网页小配件之日历

参考[前端教程]HTML+JavaScript自己动手做日历

动机

• 逛别人的博客的时候总会看到有个日历，觉得有意思，所以动手做一个给自己，要是以后搭自己的博客，就把日历添上。

过程

在网上查找了一番资料之后，知道了原理，于是动手写写自己的。

结构——HTML（详细见附录）

• 首先日历整体作为一个大模块(div)，其中可分为两大部分——calendartitle和calendarbody，calendartitle包括年月的显示和上一月、下一月的切换按钮；calendarbody包括星期天到星期一的名称显示和日期的按月份显示

<div class="calendar">
    <div class="calendartitle">
    ...
    </div>
    <div class="calendarbody">
    ...
    </div>
</div>  

表现——CSS（详细见附录）

• 在日历类中，我设置了高度、宽度、字体大小，由于继承关系，在它之下的子孙元素会继承这些属性值，所以在它的子孙元素的样式规则中，涉及到高度、宽度、字体大小时我都使用了百分比和em，这样，只要上层的.calendar变化，其它的元素大小也会跟着变化。(注：显示效果中边框的样式选择了ridge)

.calendar{
    height: 400px;   
    width: 400px;  
    font-size:15px;   
    border:8px solid #CDBA96;  
    border-radius: 20px;
    border-style: ridge;
}

• 切换上一月与下一月的两个按钮需要采用定位技术：position；
  将position属性设置成为relative，这样，就可以让它脱离正常文档流，相对于它在正常文档流中的位置进行定位，还要配合top和left的使用：

#prev{                                             
    position: relative;
    top:-2.5em;
    left: -5em;
}
#next{
    position: relative;
    top:-2.5em;
    left: 5em;
}

• 下面日期的月份显示形式使用的是无序列表ul，然后将它的列表项li浮动起来，一个接一个的排下去，形成日期表：

.bodylist ul li{
    width:14.28%;
    height: 2.6em;
    display:block;
    float:left;
    list-style-type:none;
    line-height: 2.6em;
    box-sizing:border-box;
    text-align:center;
}

• 为了方便javascript执行时动态的变化，这里预先设置的颜色类，在javascript中要对不同元素应用不同的颜色时，只需将它的class名设置成以下对应的就行。

/*颜色设置类*/
.lightgrey{
    color:#a8a8a8; /*浅灰色*/