网页小配件之日历
参考[前端教程]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; /*浅灰色*/
}
.darkgrey{
color:#565656; /*深灰色*/
}
.lightbrown{
color