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 = 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>"); //表格结束

　　效果如下:

js编写日历的思路

猜你喜欢