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 相关文章推荐
为超链接加上disabled后的故事
Dec 10 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
jquery使用经验小结
May 20 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
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
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
php实用代码片段整理
2016/11/12 PHP
简单实现php上传文件功能
2017/09/21 PHP
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
python多线程threading.Lock锁用法实例
2014/11/01 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
电子信息科学专业自荐信
2014/01/30 职场文书
难忘的一课教学反思
2014/04/30 职场文书
党日活动总结
2014/05/07 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
支部鉴定材料
2014/06/02 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书