原生JS实现Calender

原生JS实现Calender

秋招发现很多大厂的笔试题都有手写原生Calender，于是想着用原生手写一个Calender组件。

/------------------------------核心思路--------------------------------/
0、做一个days数组，数组为一年中每个月的天数（暂定2月为28天），判断当前年是否闰年来改变2月的天数。

1、做一个dayMatrix矩阵，矩阵由row数组组成，row长度为7，也就是说row的index是0-6（row[0]代表星期天，row[6]代表星期六），每个row都是Calender上的一行day。

2、获取选中的year、month，生成dayMatrix时令day=1，并判断day是星期几，用row来存放每个day，day=1是星期几决定day在第一个row中的哪个位置以及第一个row要 unshift 多少个数据；举个例子如果1号是星期四则要向前补四个数据（假设上个月有30天），那么你的第一个row的数据应该是[27,28,29,30, 1, 2, 3]。

3、接着2把第一个row补完数据后=> row = [27, 28, 29, 30]，用for遍历当前的月天数，day=1开始递增，row添加day，每满7个就添加到dayMatrix中后清空掉row（row = []），以此循环直到结束。

3、for循环结束后，会有row长度不足7的情况，不足7的row不会在循环中添加到dayMatrix；所以我们需要把最后一个长度不足7的row补够7后再添加到dayMatrix，例如31号是星期二，那么最后一个row补好数据后应该为[29, 30, 31, 1, 2, 3, 4]则row要push 1-4。

/--------------------------常规操作------------------------------------/
4、根据day矩阵生成day然后在选中的element展示出来。

5、使用事件代理处理各个点击触发的事件。

6、判断下一个月时当前月是否12月，是则year+1，month = 1；不是的话则month+1。

7、判断上一个月时当前月是否1月，实则year-1，month = 12；不是的话则month-1。

8、选中时间的红圈有兴趣看代码吧！！！

效果图：

源码百度云盘自取：
链接：https://pan.baidu.com/s/1U9ssMizhnpQZ9w-LcU2csg
提取码：kjyc