基于javascript编写简单日历


Posted in Javascript onMay 02, 2016

一.表格行数问题

     既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第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 = ' ': 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号,效果图如下:

基于javascript编写简单日历

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
最简单的js图片切换效果实现代码
Sep 24 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
JavaScript实现手风琴效果
Feb 18 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
JavaScript实现页面动态验证码的实现示例
Mar 23 Javascript
Bootstrap媒体对象的实现
May 01 #Javascript
Bootstrap进度条组件知识详解
May 01 #Javascript
BootStrap glyphicons 字体图标实现方法
May 01 #Javascript
JS实现左右无缝轮播图代码
May 01 #Javascript
JavaScript中的继承之类继承
May 01 #Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 #Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 #Javascript
You might like
php生成WAP页面
2006/10/09 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
Python单体模式的几种常见实现方法详解
2017/07/28 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
关于工资低的辞职信
2014/01/14 职场文书
师德模范事迹材料
2014/06/03 职场文书
经典毕业生求职信
2014/07/12 职场文书
职工小家建设活动方案
2014/08/25 职场文书
走群众路线剖析材料
2014/10/09 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
中学政教处工作总结
2015/08/13 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS