基于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数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 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
Protoss建筑一览
2020/03/14 星际争霸
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
解析jquery获取父窗口的元素
2013/06/26 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
Python解决鸡兔同笼问题的方法
2014/12/20 Python
详细解读Python中的__init__()方法
2015/05/02 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
python实现小世界网络生成
2019/11/21 Python
Python 实现一个简单的web服务器
2021/01/03 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
《在家里》教后反思
2014/03/01 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
停车场管理协议书范本
2014/10/08 职场文书
二手车转让协议书
2015/01/29 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书