js实现简单的日历显示效果函数示例


Posted in Javascript onNovember 25, 2019

本文实例讲述了js实现简单的日历显示效果函数。分享给大家供大家参考,具体如下:

用一个函数简单的实现一个月份的日历,效果如下:

js实现简单的日历显示效果函数示例

这个日历效果有高亮显示,我实现的思维比较简单。

我把上面的日历效果用表格table生成,分成两个部分。

第一个部分:就是前面的第一排,我用一行<tr></tr>显示,这一部分表示的上个月份留下来的日期和这个月份的日期的混合日期;

第二部分:就是剩下的所有排,这里我用五行<tr></tr>显示,这一部分表示的是这个月份和下个月份的日期的混合日期。

这里为什么要用6行<tr></tr>来显示日历的效果呢?原因是有的月份跨越了6行,所以为了兼容所有的月份,只好用6行了。

下面是代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>js的日历</title>
 <meta name="keywords" content="关键字列表" />
 <meta name="description" content="网页描述" />
 <link rel="stylesheet" type="text/css" href="" />
 <style type="text/css">
  table tr td {
   width:27px;
   text-align:center;
  }
 </style>
 <script type="text/javascript">
 (function(){
  //获取日历的函数,参数是年份year和月份Month,默认是今年当月的日历
 function getcalendar(year,month){
  year = year ? year : new Date().getFullYear();
  //month是0开始到11结束的,获取当前月份必须加1
  month = month ? month : new Date().getMonth()+1;
  var last = new Date(year,month-1,0);
  var lastdate = last.getDate();//获取上个月的最大日期
  var lastday = last.getDay();//获取上个月最大日期的星期几
  var months = new Date(year,month,0);
  var Maxdate = months.getDate();//获取这个月最大的日期
  //获取当前的日期,为的是高亮显示当前的日期
  var today = new Date().getDate();
  var thisyear = new Date().getFullYear();
  var thismonth = new Date().getMonth()+1;
  var str = '<table><tr style="font-size:21px;font-weight:bold;"><td id="dec">\<</td> <td colspan="5">'+year+'年'+month+'月</td><td id="add">\></td></tr><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>';
  //获取上个月在这个月份中存在的最后日期
  var remainlastdate = lastdate - lastday;
  var t = 1;
  str += '<tr>';
  for(var g=0;g<=6;g++){
  //星期是从0开始到6结束的,小于等于上个月最大星期的日期则是上个月的日期
   if(g <= lastday){
    str +='<td>'+ remainlastdate++ +'</td>';
   }else{
    //高亮显示当前日期
    if(thisyear == year && thismonth == month && today == t){
     str +='<td style="color:red;">'+ t++ +'</td>';
    //假如不是当前月份则默认1为高亮日期
    }else if((thisyear != year && t == 1) || (thismonth != month && t == 1)){
     str +='<td style="color:red;">'+ t++ +'</td>';
    }else{
    //该月份的普通日期
     str +='<td style="color:blue;">'+ t++ +'</td>';
    }
   }
  }
  str += '</tr>';
  //除去上面的部分,这个月从哪里开始
  var remainlastday = 6 - lastday + 1;
  var nextMonthday = 1;//下一个月份的开始日期
  //这里i最大值为5是为了兼容所有的月份,有的月份可能跨越6个tr
  for(var i=1;i<=5;i++){
   str += '<tr>';
   for(var j=0;j<7;j++){
    if(remainlastday <= Maxdate){
     if(thisyear == year && thismonth == month && today == remainlastday){
     str +='<td style="color:red;">'+ remainlastday++ +'</td>';
     }else{
      if((thisyear != year && remainlastday == 1) || (thismonth != month && remainlastday == 1)){
       //剩下的天数从这里开始的话,默认的第一天还是为红色
       str +='<td style="color:red;">'+ remainlastday++ +'</td>';
      }else{
       str +='<td style="color:blue;">'+ remainlastday++ +'</td>';
      }
     }
    }else{
     str +='<td>'+ nextMonthday++ +'</td>';
    }
   }
   str += '</tr>';
  }
  str +='</table>';
  return str;
 }
 return window.calendar=getcalendar;
 })();
 document.write(calendar(2018,1));
 </script>
</head>
<body>
<div id='di'></div>
</body>
</html>

上面的函数简单的实现了日历,当然,要想让这个日历变得更强大,更有意思,你还得自己动手修改一下上面的函数。

有什么bug还望读者指出。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
js 效率组装字符串 StringBuffer
Dec 23 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
通过url查找a元素并点击
Apr 09 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 #Javascript
用Golang运行JavaScript的实现示例
Nov 25 #Javascript
JS插入排序简单理解与实现方法分析
Nov 25 #Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 #Javascript
python实现迭代法求方程组的根过程解析
Nov 25 #Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 #Javascript
JavaScript交换两个变量方法实例
Nov 25 #Javascript
You might like
给多个地址发邮件的类
2006/10/09 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
php简单中奖算法(实例)
2017/08/15 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
深入理解Python装饰器
2016/07/27 Python
python+opencv实现动态物体追踪
2018/01/09 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
ipython和python区别详解
2019/06/26 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
django-allauth入门学习和使用详解
2019/07/03 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
会计电算化学生个人的自我评价
2014/02/08 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
自我检讨报告
2015/01/28 职场文书