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中通过URL传递汉字的方法
Apr 09 Javascript
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
对xmlHttp对象的理解
Jan 17 Javascript
javascript类型转换使用方法
Feb 08 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
canvas实现探照灯效果
Feb 07 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 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
模板引擎正则表达式调试小技巧
2011/07/20 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
在Python中使用元类的教程
2015/04/28 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
python/golang 删除链表中的元素
2020/09/14 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
租房协议书怎么写
2014/04/10 职场文书
教师评语大全
2014/04/28 职场文书
公司收款委托书范本
2014/09/20 职场文书
团日活动总结格式
2015/05/11 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android