js日曆插件

最近因爲項目需求，懶的看別人的源碼所以自己動手寫了一個原生的js日曆插件，
這裏就簡單分析一下，代碼不在這裏，biu~ js，css，html都在calendar.html裏

需要了解

var date=new Date();
//獲取
date.getFullYear();//獲取年份（2018）
date.getMonth();//獲取月份（number類型 ，1）
date.getDate();//獲取日期(21)
date.getDay();//獲取星期（3）
//設置
date.setFullYear(2019);
date.setMonth(1);
date.setDate(21);
date.setDay(3);

需要注意

1. 今天是2018年2月21日星期三，看上面的代碼可以發現月份是1, 這裏需要注意月份是從0開始算的。

2. 2018年2月0日，即2018年1月31日，這在渲染每個月的具體天數時有用，可以獲取每個月最大天數

截圖

代碼詳解

如何用

傳進去id，點擊這個id所屬的div（或button、span等），就會出現日曆，選擇的日期就會顯示爲這個div的innerHTML。如下代碼

        calendar.init('date1');
        calendar.init('date2');

細數函數

1. init(para1)
   獲取傳進來的id所屬的對象，給此對象添加點擊事件
2. addEvent()
   執行點擊事件，
3. renderHTML()
   點擊後執行此函數，用來顯示日曆，默認當前日期
   ，HTML渲染完畢之後，開始獲取需要的節點，並
   爲按鈕添加點擊事件（上一月，下一月，上一年，
   下一年，關閉日曆）
4. closeCalendar()
   關閉日曆，即是移除節點的操作，移除第三個函數產生
   的div
5. nextYear()
   年數+1，並設置month，date，爲該年第一個月第一
   天，後設置month+1，date爲2（例0+1即爲2月，date爲
   0，即是2月0日，顯然不合理，js就會把它轉化爲1月的
   最後一天，前面有提到過~~~），便獲取到該年第一個
   月 一共有多少天，有了這個數據便可以渲染這一年這一
   月的日曆詳情了
6. nextMonth()
   原理同上，不過年數不變，月份+2，date設爲0，便可
   以獲取到下個月的最大天數，
7. preYear()
8. preMonth()
   上一月，上一年的情況就不再贅述~~~，情況差不多
9. renderCalendar()
   此函數就是根據每個月的最大天數來循環產生每一天的
   span，爲他添加click事件，並設置margin-left屬性
10. choseDate()
    選中該月的這個日期，便改變innerHTML
11. switchDay()
    將用數字表示的星期，改爲用漢字