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 相关文章推荐
js跟随滚动条滚动浮动代码
Dec 31 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
JS实现一键回顶功能示例代码
2013/10/28 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
python定义类self用法实例解析
2020/01/22 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
工程测量与监理专业应届生求职信
2013/11/27 职场文书
优秀幼教自荐信
2014/02/03 职场文书
食品安全承诺书范文
2014/08/29 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
装修公司管理制度
2015/08/05 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android