首页 > 电脑主机 >

js为当天写了一个简单的日历

电脑杂谈　发布时间：2020-04-22 07:10:55　来源：网络整理

当天的日历桌面_桌面闹钟日历_5月日历桌面

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

一个. 表行数问题

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

1 var tr_nums = Math.ceil((5 + 31)/7);

桌面闹钟日历_当天的日历桌面_5月日历桌面

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

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

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

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

5月日历桌面_桌面闹钟日历_当天的日历桌面

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

复制代码

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

复制代码

桌面闹钟日历_5月日历桌面_当天的日历桌面

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

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

两个. 打印日历表格

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

当天的日历桌面_5月日历桌面_桌面闹钟日历

复制代码

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