js编写当天简单日历效果【实现代码】

 更新时间:2016年05月03日 17:37:04   投稿:jingxian  
下面小编就为大家带来一篇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); 

当然,并不是每个月都是31天,所以我们得创建一个包含12个月份的数组,每个元素代表每个月份所包含的天数。但是2月份比较特殊,闰年的2月份有29天,平年的2月份只有28天。所以,在创建数组之前,得自己创建一个判断闰年的函数:

//如果当前年份能被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);

 这样就能保证无论是平年还是闰年都会取出正确的天数,下面的代码用于获取今天的相关信息:

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); //确定日期表格所需的行数

二.打印日历表格

   表格本身是一个二维数组,所以让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 = '&nbsp;': 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编写当天简单日历效果【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JavaScript时间戳与时间相互转换的常用方法

    JavaScript时间戳与时间相互转换的常用方法

    这篇文章主要介绍了JavaScript时间戳与时间相互转换的常用方法,包括获取当前时间戳、时间戳转时间对象、时间戳转格式化字符串、时间字符串转时间戳等,还讨论了常见应用场景如计算时间差、倒计时和UTC与本地时间互转,需要的朋友可以参考下
    2025-04-04
  • Bootstrap实现各种进度条样式详解

    Bootstrap实现各种进度条样式详解

    本篇文章主要介绍了Bootstrap实现各种进度条样式详解 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • js获得参数的getParameter使用示例

    js获得参数的getParameter使用示例

    这篇文章主要介绍了js获得参数的getParameter使用示例,需要的朋友可以参考下
    2014-02-02
  • JavaScript中的公有、私有、特权和静态成员用法分析

    JavaScript中的公有、私有、特权和静态成员用法分析

    这篇文章主要介绍了JavaScript中的公有、私有、特权和静态成员用法,以实例形式分析了其使用方法,简单易懂,对于初学javascript的朋友具有不错的学习与借鉴价值,需要的朋友可以参考下
    2014-11-11
  • asp 取文本框名称代码

    asp 取文本框名称代码

    可以批量获取文本框名称的代码
    2008-12-12
  • 处理文本部分内容的TextRange对象应用实例

    处理文本部分内容的TextRange对象应用实例

    TextRange是用来表现HTML元素中文字的对象,是一个用于处理JavaScript对象文本部分内容的一个对象
    2014-07-07
  • 微信小程序自定义modal弹窗组件的方法详解

    微信小程序自定义modal弹窗组件的方法详解

    这篇文章主要给大家介绍了关于微信小程序自定义modal弹窗组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • JavaScript中的数据劫持和数据代理使用

    JavaScript中的数据劫持和数据代理使用

    文章主要介绍了数据劫持(Object.defineProperty)和数据代理(Proxy)两种方式在JavaScript中的应用,并通过生活中的例子来详细解释它们的工作原理和使用场景,文章还对比了两种方式的优缺点,并指出了它们在Vue.js中的应用
    2025-02-02
  • JavaScript实现与使用发布/订阅模式详解

    JavaScript实现与使用发布/订阅模式详解

    这篇文章主要介绍了JavaScript实现与使用发布/订阅模式,较为详细的分析了发布/订阅模式的概念、原理并结合实例形式分析了javascript实现与使用发布/订阅模式的相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • JavaScript深拷贝和浅拷贝概念与用法实例分析

    JavaScript深拷贝和浅拷贝概念与用法实例分析

    这篇文章主要介绍了JavaScript深拷贝和浅拷贝概念与用法,结合实例形式较为详细的分析了javascript深拷贝与浅拷贝的概念、原理、用法及相关操作技巧,需要的朋友可以参考下
    2018-06-06

最新评论