JavaScript实现万年历【展示前后月补充日期、可上下月份切换】

最近在产品业务开展中，碰到了有使用日历展示数据的需求，当即想起来了js常用案例——万年历的实现，这里做的相对简单，只需获取本月的日历展示出来即可，另加上下月份切换。

首先，我们先来看一下最终要实现的效果，即UI设计图：

（这里只讨论万年历展示的实现，业务数据展示已马赛克，请见谅~~）

在设计图中我们可以看出，首尾的灰色部分为上月和下月的相关日期补充，蓝色部分为本月日期展示。 到这里我们就整理一下思路：

1、本月第一天是周几。

2、今年是平年/闰年的判断（关系到二月份天数）。

3、本月第一天前存在多少空位，需要补充多少上月日期。

4、本月最后一天存在多少空位，需要补充多少下月日期。

5、处理好逻辑关系后，将处理完的日历信息进行渲染展示。

思路整理之后，那么我们只需要将我们的逻辑转换为代码：

<!-- 基础布局html（只展示结构，css样式可自行修改，这里不做赘述） -->
<div class="calendarInfo">
	<h6 class="calendarTitle">
		<div class="setImg">				
			<span>工作记录台</span>
			<span id="btn_prevmonth">上一月</span>
			<span id="btn_nextmonth">下一月</span>
		</div>
	</h6>
	<ol>
		<li>周一</li>
		<li>周二</li