js编写日历的思路

2019-12-09 10:51:08 阅读：230 来源： 互联网

标签：30 const 31 日历 js str year date 编写

首先写出一个日历我们需要考虑以下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>"); //表格结束

　　效果如下:

标签：30,const,31,日历,js,str,year,date,编写
来源： https://www.cnblogs.com/zaijin-yang/p/12009727.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js编写日历的思路