js编写当天简单日历效果【实现代码】


Posted in Javascript onMay 03, 2016

之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试。最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理。自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由发挥了,先在这里分享一下吧,有兴趣的可以试试!

一.表格行数问题

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

js编写当天简单日历效果【实现代码】

以上这篇js编写当天简单日历效果【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
jQuery 选择器详解
Jan 19 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
angular 服务随记小结
May 06 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
javascript实现下雪效果【实例代码】
May 03 #Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 #Javascript
javascript的列表切换【实现代码】
May 03 #Javascript
jQuery中队列queue()函数的实例教程
May 03 #Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 #Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 #Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 #Javascript
You might like
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
php 冒泡排序 交换排序法
2011/05/10 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
php连接mysql数据库
2017/03/21 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
学习ExtJS form布局
2009/10/08 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
python 写一个性能测试工具(一)
2020/10/24 Python
英国在线花园中心:You Garden
2018/06/03 全球购物
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
酒店营销策划方案
2014/02/07 职场文书
卖房协议书
2014/04/11 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
公司员工辞职信范文
2015/05/12 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
Redis集群的关闭与重启操作
2021/07/07 Redis