基于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 相关文章推荐
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
微信小程序实现禁止分享代码实例
Oct 19 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 SplObjectStorage使用实例
2015/05/12 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
JS常见算法详解
2017/02/28 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
Django开发中复选框用法示例
2018/03/20 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
Python实现爬取并分析电商评论
2020/06/19 Python
如何用Django处理gzip数据流
2021/01/29 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
安全检查与奖惩制度
2014/01/23 职场文书
离婚协议书怎么写
2014/09/12 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
教师党员承诺书2015
2015/01/21 职场文书
西湖英语导游词
2015/02/06 职场文书
公司联欢会主持词
2015/07/04 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server