基于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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
PHP闭包实例解析
2014/09/08 PHP
javascript 一些用法小结
2009/09/11 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
python  logging日志打印过程解析
2019/10/22 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
公司联欢会策划方案
2014/05/19 职场文书
禁止酒驾标语
2014/06/25 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
团日活动总结格式
2015/05/11 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
导游词之包公祠
2019/11/25 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
nginx中proxy_pass各种用法详解
2021/11/07 Servers
Nginx 匹配方式
2022/05/15 Servers
详解flex:1什么意思
2022/07/23 HTML / CSS