主要分为三个部分，1：获取li元素 2：如何填写对应的日期 3：如何获取点击li元素的事件。
1：通过节点间关系的属性children 获取li元素（两个for循坏遍历）；
2：在遍历填写日期时，在第一行判断在当月的第一天在星期几，然后从第一天开始填写，直到大于当月的天数就暂停填写，并开始填写下个月的日期。第一行上个月的日期显示 : 上月天数显示开始值 = 计算上个月的天数 - 这个月开始的第一天在星期几的值 -1，然后在第一行上月天数显示开始值自加。
3：利用JS的事件冒泡获取li的innerHTML显示出对应日期
效果图：
代码如下：
calendar .clear:after{ content:""; display:table; clear:both; } .left{ float:left; } ul{ padding:0px; margin-top:5px; margin-bottom:0px; } ul>li{ float:left; list-style:none; width:30px; height: 21px; border: 1px solid #ccc; text-align:center; } .gray{ color:#766565; } .top { height:25px; } .top .lf-tri{ border:10px solid transparent; border-right-color:black; margin-top:4px; } .top .rf-tri{ border:10px solid transparent; border-left-color:black; margin-top:4px; } .top .content{ width:185px; height:5px; text-align:center; } 2017年2月1日
- 日
- 一
- 二
- 三
- 四
- 五
- 六
- 30
- 31
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 1
- 2
- 3
- 4
- 5
- 27
- 28
- 1
- 2
- 3
- 4
- 5
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！
