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

我一直想用javascript写一个日历，但是我没有尝试，因为我根本没有一个好主意。最近刚在网上看到一个用javascript写的简单日历的例子。虽然代码量很小，但我认为它很好地说明了js日历的实现原理。我也尝试自己做，收获很大。掌握了实现的基本原理后，如果想增加更多的功能，可以自由发挥。先在这里分享一下，有兴趣的可以试试！

1.表中的行数。

如果要显示日期表，必须首先知道该表有多少行和列。列数已经确定，周日(日历第一列为周日)到周六共7列。在解决行号问题之前，我们必须知道这个月的第一天，因为每个月的第一天不是从日历中的星期日开始安排的，可能是星期五，也可能是星期六，所以第一天的左边部分必须用一个空表来代替。取而代之的是多少空表？这里使用了getDay()方法，返回数组[0-6]中的一个数字，其中0代表星期日，1代表星期一，2代表星期二，依此类推。因此，如果一个月的第一天是星期五，则需要五张空表来替换它的左右两边。然后，如果一个月中有31天，表单中最终计算的行数是：

var tr _ nums=Math . ceil((5 31)/7)；

当然，不是每个月都是31天，所以我们要创建一个包含12个月的数组，每个元素代表每个月的天数。但二月比较特殊，闰年二月有29天，正常年份二月只有28天。因此，在创建数组之前，您必须创建一个函数：来判断闰年。

//如果当年可被4整除但不能被100整除或不能被400整除，则可以确定为闰年，返回1；否则，0函数是leap (year) {return year% 4==0？(年份百分百！=0 ?1 :(年份% 400==0？1 : 0)) : 0;}然后我们创建一个月数组：

var days_per_month=新数组(31，28 isLeap(年)，31，30，31，30，31，31，30，31，30，31，30，31，30，31)；这样就可以保证正常年份和闰年都要取出正确的天数。以下代码用于获取今日：的相关信息。

Var today=new Date()，//获取当前日期y=today.getFullYear()，//获取年份m=today.getMonth()，//获取日期中的月份(需要注意的是月份是从0开始计算的。获得的值1)小于正常月份的值。d=今天。getdate()，//获取日期中的日期(创建日期表时突出显示日期比较方便)。firstday=新日期(y，m，1)，//获取月的第一天，day fweek=first day . getday()。//判断第一天的日期(返回[0-6]中的一个，其中0代表星期日，1代表星期一，以此类推)。days _ per _ month=新数组(31，28是leap (y)，31，30，31，30，31，30，31，30，31，30，31，30，31，30，31。

var str _ nums=math . ceil((dayOfWeek days _ per _ month[m])/7)；//确定日期表2所需的行数。打印日历表格。

这个表本身就是一个二维数组，所以让高手替出来运行两个周期。代码如下：

for(I=0；i str _ numsI=1) {//循环的第一层创建tr标记文档. write(' tr ')；for(k=0；k7；K) {//循环的第二层创建td标记var idx=7 * I k；//为每个表创建一个索引，从0开始。var date=idx-dayOfWeek 1；//将当月1日与星期匹配//做点别的事情} document . write('/tr ')；} 3.附上完整的js日历代码。

Script //判断当前年份是否为闰年(闰年2月有29天，正常年份2月只有28天)。函数是leap (year) {return year% 4==0。(年份百分百！=0 ?1 :(年份% 400==0？1 : 0)) : 0;} var i，k，today=new Date()，//获取当前日期y=today.getFullYear()，//获取日期中的年份m=today.getmonth()，//获取日期中的月份(需要注意的是，月份是从0开始计算的。获得的值1)小于正常月份的值。d=今天。getdate()，//获取日期中的日期(创建日期表时突出显示日期比较方便)。firstday=新日期(y，m，1)，//获取月的第一天，day fweek=first day . getday()。//判断第一天的日期(返回[0-6]中的一个，其中0代表星期日，1代表星期一，以此类推)。days _ per _ month=新数组(31，28是leap (y)，31，30，31，30，31，30，31，30，31，30，31，30，31，30，31。//确定日期表格文档所需的行数。写入('表格单元格间距=' 0 ' TRTH Day/th I/th II/th III/th IV/th V/th VI/th/tr ')；//为(i=0)打印表格的第一行(显示星期);i str _ numsI=1) {//二维数组创建日期表document . write(' tr ')；for(k=0；k7；k){ var idx=7 * I k；//为每个表创建一个索引，从0开始。var date=idx-dayOfWeek 1；//将当前月份的第一天与星期匹配(日期=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 ')；让我们自由地演奏/scriptcss部分。当前时间为2016年5月2日，渲染如下：

上面简单的js编写当天的日历效果[实现代码]就是边肖和大家分享的全部内容。希望能给大家一个参考，多支持我们。