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 相关文章推荐
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
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
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
php汉字转拼音的示例
2014/02/27 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
微信支付开发告警通知实例
2016/07/12 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
Javascript倒计时代码
2010/08/12 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
JavaScript类的写法
2016/09/17 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
图解Python变量与赋值
2018/04/03 Python
python框架中flask知识点总结
2018/08/17 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
旅游与环境专业求职信
2014/06/05 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
总结Python变量的相关知识
2021/06/28 Python