js編寫日歷的思路

首先寫出一個日歷我們需要考慮以下2個問題:

• 每個月的總天數
• 每個月的第一天周幾

這里提供了一個判斷平年閏年2月份天數的方法:

function leapYear(year) {
   return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}

1.因此可以得到12個月份天數的數組:

const monthDays = new Array(31, 28 + leapYear(year), 31, 30, 31, 31, 30, 31, 30, 31, 30, 31)

因為獲取到的月份是0-11，所有剛好和數組的下標對應上。

2.獲取每個月的1日是星期幾：

let monthDayOne = new Date(2019, 12, 1)
const firstday = monthDayOne .getDay()

通過月總天數和該月第一天是星期幾兩個條件就可以得到行數，解決表格所需行數問題：（當前月天數+第一天是星期幾的數值）/ 7

const date = new Date()
const mnow = date.getMonth()
const tr_str = Math.ceil((monthDays[mnow] + firstday)/7);

其次就是渲染問題了

完整的js代碼如下：

const date = new Date()
const {year, month, day} = {
  year: date.getFullYear(),
  month: date.getMonth(),
  day: date.getDate()    
}
let monthDayOne = new Date(year, month, 1)
const firstday = monthDayOne.getDay()

const monthDays = new Array(31, 28 + leapYear(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)
const tr_str = Math.ceil((monthDays[month] + firstday) / 7)

function leapYear(year) {
   return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}

這是我寫的一個簡單的渲染:

//打印表格第一行（有星期標志）
document.write ("<table border='1' align='center' width='220' cellspacing='0'><tr><td align='center'>日</td><td align='center'>一</td><td align='center'>二</td><td align='center'>三</td><td align='center'>四</td><td align='center'>五</td><td align='center'>六</td></tr>");
  for(i=0;i<tr_str;i++) { //表格的行
     document.write("<tr>");
     for(k=0;k<7;k++) { //表格每行的單元格
	idx=i*7+k; //單元格自然序列號
	date_str=idx-firstday+1; //計算日期
	(date_str<=0 || date_str>m_days[mnow]) ? date_str=" " : date_str=idx-firstday+1; //過濾無效日期（小於等於零的、大於月總天數的）
	      //打印日期：今天底色為紅
	 date_str==dnow ? document.write ("<td align='center' bgcolor='red'>" + date_str + "</td>") : document.write ("<td align='center'>" + date_str + "</td>");
     }
     document.write("</tr>"); //表格的行結束
}

document.write("</table>"); //表格結束

　　效果如下: