JS实现一个简单的日历-创新互联

主要分为三个部分，1：获取li元素 2：如何填写对应的日期 3：如何获取点击li元素的事件。

1：通过节点间关系的属性children 获取li元素（两个for循坏遍历）；

2：在遍历填写日期时，在第一行判断在当月的第一天在星期几，然后从第一天开始填写，直到大于当月的天数就暂停填写，并开始填写下个月的日期。第一行上个月的日期显示  : 上月天数显示开始值 = 计算上个月的天数 - 这个月开始的第一天在星期几的值 -1，然后在第一行上月天数显示开始值自加。

3：利用JS的事件冒泡获取li的innerHTML显示出对应日期

效果图：

代码如下：

 
 
 
 
 
 
 
 
 
  
 

 

 
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
 
 
 

 
 

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。