js编写当天的简单日历效果[实现代码]

我一直想使用javascript编写日历，但是我没有尝试过，因为我没有一个好主意. 最近，我刚刚在Internet上看到了一个用javascript编写的简单日历的示例. 尽管代码量不大，但我认为它很好地解释了js日历的实现原理. 我也尝试自己做，这是非常有益的. 掌握了基本的实现原理之后，我想添加更，并且可以自由地充分发挥它. 我先在这里分享. 如果您有兴趣，可以尝试一下！

一个. 表行数问题

由于要显示日期表，因此必须首先知道该表有多少行和多少列，并且已经确定了从星期日（日历的第一列为星期日）到星期六的列数. 总共7列. 在解决行数问题之前，您必须首先知道每月的第一天是星期几，因为每个月的第一天并不总是从日历上的星期日安排的，可能是第一天是星期五，星期六也说不确定，因此必须将第1号的左侧部分替换为空白表格. 因此，要使用多少个空表当天的日历桌面，必须在这里使用getDay（）方法当天的日历桌面，该方法返回数组[0-6]中的数字，0代表星期日，1代表星期一，2代表星期二，依此类推. 因此，如果一个月的第一天是星期五，那么左侧只需5个空表. 然后，如果一个月中有31天，则表行的最终数量为:

var tr_nums = Math.ceil（（5 + 31）/ 7）;

当然，不是每个月都有31天，因此我们必须创建一个12个月的数组，每个元素代表每个月的天数. 但是，2月是非常特殊的，February年的2月为29天，普通年的2月只有28天. 因此，在创建数组之前，您必须创建一个函数来自行判断year年:

//如果当前年份能被4整除但是不能被100整除或者能被400整除，即可确定为闰年，返回1，否则返回0
function isLeap(year) {
 return year % 4 == 0  (year % 100 != 0  1 : (year % 400 == 0  1 : 0)) : 0;
}

然后我们创建一个月数组:

var days_per_month = new Array(31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

这将确保无论是正常年份还是a年，都将提取正确的天数. 以下代码用于获取有关今天的信息:

var today = new Date(),       //获取当前日期
  y = today.getFullYear(),     //获取日期中的年份
  m = today.getMonth(),      //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
  d = today.getDate(),       //获取日期中的日(方便在建立日期表格时高亮显示当天)
  firstday = new Date(y, m, 1),  //获取当月的第一天
  dayOfWeek = firstday.getDay(),  //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
  days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), //创建月份数组

因此，最后，您可以获得当月所需表的行数:

var str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); //确定日期表格所需的行数

两个. 打印日历表格

表本身是一个二维数组，因此让Master For出来并运行两个循环. 代码如下:

for (i = 0; i < str_nums; i += 1) {   //第一层for循环创建tr标签
  document.write('<tr>');
  for (k = 0; k < 7; k++) {      //第二层for循环创建td标签
   var idx = 7 * i + k;        //为每个表格创建索引,从0开始
   var date = idx - dayOfWeek + 1;  //将当月的1号与星期进行匹配
   //do something else
  }
  document.write('</tr>');
  }

三个. 附加完整的js日历代码

<script>
  //判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
  function isLeap(year) {
  return year % 4 == 0  (year % 100 != 0  1 : (year % 400 == 0  1 : 0)) : 0;
  }
  var i, k,
  today = new Date(),                 //获取当前日期
  y = today.getFullYear(),              //获取日期中的年份
  m = today.getMonth(),                //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
  d = today.getDate(),                //获取日期中的日(方便在建立日期表格时高亮显示当天)
  firstday = new Date(y, m, 1),            //获取当月的第一天
  dayOfWeek = firstday.getDay(),           //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
  days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),         //创建月份数组
  str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7);                        //确定日期表格所需的行数
  document.write("<table cellspacing='0'><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>"); //打印表格第一行(显示星期)
  for (i = 0; i < str_nums; i += 1) {         //二维数组创建日期表格
  document.write('<tr>');
  for (k = 0; k < 7; k++) {
   var idx = 7 * i + k;                //为每个表格创建索引,从0开始
   var date = idx - dayOfWeek + 1;          //将当月的1号与星期进行匹配
   (date <= 0 || date > days_per_month[m])  date = ' ': date = idx - dayOfWeek + 1;  //索引小于等于0或者大于月份最大值就用空表格代替
   date == d  document.write('<td class="today">' + date + '</td>') : document.write('<td>' + date + '</td>');  //高亮显示当天
  }
  document.write('</tr>');
  }
  document.write('</table>');
 </script>

每个人都可以在CSS部分中自由发挥. 当前时间是2016年5月2日. 效果图如下:

上面js编写的上述简单日历效果[实现代码]是我与您共享的所有内容. 我希望为您提供参考，也希望您可以支持该脚本主页.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-184485-1.html