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 相关文章推荐
Javascript玩转继承(二)
May 08 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
js生成word中图片处理方法
Jan 06 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
JS计算斐波拉切代码实例
Sep 12 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
理解php Hash函数,增强密码安全
2011/02/25 PHP
解析link_mysql的php版
2013/06/30 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
javascript 构造函数方式定义对象
2015/01/02 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python使用django搭建web开发环境
2017/06/09 Python
python 换位密码算法的实例详解
2017/07/19 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
python3爬虫怎样构建请求header
2018/12/23 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
送餐员岗位职责范本
2014/02/21 职场文书
2014年销售工作总结
2014/12/01 职场文书
趣味运动会开幕词
2015/01/28 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript