日历组件

使用原生js封装了calender对象，遇到的问题还是挺多的。技术上来说不是很难，大概有下列函数：

init: 用于初始化对象

initActive: function(tag) {
	var li, str;
	switch(tag) {
		case 0:
			str = '.calender-year';
			break;
		case 1:
			str = '.calender-month';
			break;
		case 2:
			str = '.calender-num';
			break;
	}
	li = document.querySelector(str).getElementsByTagName('li');
	for (var i = 0; i < li.length; i++) {
		if (tag == 2 && this.date[2] == 30 || this.date[2] == 31) {
			var space = this.getSpace();
			var days = this.getDays();
			li[space + days[this.date[1]-1] - 1].className = 'active';
			break;
		}
		if (li[i].innerHTML == this.date[tag]) {
			li[i].className = 'active';
		}
	}
} 

这个函数用于默认选中号数，其关键点在于，当选择31或者30的时候，切换月份可能31或者30号不存在，这里做的处理是我默认都选择最后一天。

addHtml: 用于初始化日历的dom结构，这个函数要注意的地方是，对空白的处理。使用getSpace函数获取开头的空格数（返回的是星期几，前面便有几个空格），末尾的空格数由该月的天数来确定。

addYear: 当选择年份时，应该展现的dom结构，3行3列

addMonth: 当选择月份时，应该展现的dom结构，4行3列

getYear: 判断是否是闰年，来确认2月份的天数

clickDay: 当点击号数或者选择年份或者选择月份的时候的事件处理，主要是对空格部分也要特殊处理，选中后不做出任何反应

click: 其余部分的事件处理，包括年份的增加减少，月份的增加减少。需要注意的是，当月份减少到1时，要做特殊处理，再减少就让年份减1，月份变为12，同理，当月份增加到12时，让年份加1，月份置为1。

效果图：

基本的代码框架解析完成，如果需要查看具体代码： https://github.com/susantong/my-components