基于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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 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中处理模拟rewrite 效果
2006/12/09 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python中星号变量的几种特殊用法
2016/09/07 Python
Python探索之创建二叉树
2017/10/25 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
python新手学习使用库
2020/06/11 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
提高EJB性能都有哪些技巧
2012/03/25 面试题
分厂厂长岗位职责
2013/12/29 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
文明班级建设方案
2014/05/15 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
庆元旦主持词
2015/07/06 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
Python制作春联的示例代码
2022/01/22 Python