js编写当天简单日历效果(实现代码).docxVIP

下面小编就为大家带来一篇 js编写当天简单日历效果 【实现代码】。小编觉得挺不错的， 现在分享给大家，也给大家做个参考 之前一直很想用javascript写一个日历，但是因为完全没有好的思路， 所以迟迟没有尝 试。最近在网上刚好看到用 javascript编写的简单日历的例子， 代码量虽然不大， 但是我觉 得很好地阐述了 js日历的实现原理。自己也尝试着做了一下，收获蛮大，掌握了基本的实 现原理后，再想增加更多的功能，完全就可以自由发挥了，先在这里分享一下吧， 有兴趣的 可以试试！ 表格行数问题 既然要显示日期表格的话，首先得知道这个表格有多少行多少列，列数是已经确定的， 从星期天(日历上第1列是星期天)到星期六一共7列。要解决行数问题之前，还得先知道 这个月的第1天是星期几，因为每个月的 1号并不都是从日历上的星期夭开始排的，可能 1 号是星期五，星期六也说不定， 所以1号的左边部分，就得用空表格代替了。那么用多少个 空表格代替呢，这里就得用到 getDay()方法了，该方法返回数组［0-6］中的一个数字，0代表 星期天，1代表星期一，2代表星期二，以此类推。所以如果一个月的 1号是星期五的话， 那么刚好左边需要 5个空表格代替。然后，假如一个月有31天，最后求出的表格行数就是： var tr_nums = Math.ceil((5 + 31)/7);nbsp; 当然，并不是每个月都是 31天，所以我们得创建一个包含 12个月份的数组，每个元素 代表每个月份所包含的夭数。但是 2月份比较特殊，闰年的 2月份有29天，平年的2月份 只有28天。所以，在创建数组之前，得自己创建一个判断闰年的函数 ： 〃如果当前年份能被 4整除但是不能被100整除或者能被400整除，即可确定为闰年， 返回1,否则返回0 function isLeap(year) { nbsp;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); nbsp ;这样就能保证无论是平年还是闰年都会取出正确的夭数， 下面的代码用于获取今 天的相关信息： var today = new Date(), nbsp; nbsp; nbsp; // 获取当前日期 nbsp; y = today.getFullYear(), nbsp; nbsp; // 获取日期中的年份 nbsp; m = today.getMonth(), nbsp; nbsp; nbsp;// 获取日期中的月份(需要注意的是： 月份是从0开始计算，获取的值比正常月份的值少 1) nbsp; d = today.getDate(), nbsp; nbsp; nbsp; // 获取日期中的日(方便在建立日期表 格时高亮显示当天) nbsp; firstday = new Date(y, m, 1), nbsp;// 获取当月的第一天 nbsp; dayOfWeek = firstday.getDay(), nbsp;// 判断第一天是星期几 (返回［0-6］中的一 个，0代表星期天，1代表星期一，以此类推) nbsp; 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); // 确定日期表格所需的 行数 打印日历表格 nbsp; nbsp;表格本身是一个二维数组，所以让for大师出来跑两个循环就搞定啦， 代 码如下： for (i = 0; i lt; str_nums; i += 1) ( nbsp; // 第一层 for 循环创建 tr 标签 nbsp; document.write(lt;trgt;); nbsp; for (k = 0; k lt; 7; k++) { nbsp; nbsp; nbsp;// 第二层 for 循环创建 td 标签 nbsp; nbsp;var idx = 7 * i + k; nbsp; nbsp; nbsp; nbsp;// 为每个表格创建索引 ，从 0开始 nbsp; nbsp;var date = idx - dayOfWeek + 1; nbsp;// 将当月的