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

　　

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

　　我把上面的日历效果用表格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还望读者指出。

一个js简单的日历显示效果的函数的更多相关文章

  1. Epii.js 一个极其简单的Js模板引擎

    Epii.js 简约而不简单的Js模板引擎 Epii.js 简约而不简单的JavaScript模板引擎 # 特性 一个轻量级模板引擎,可快速实现数据与ui绑定(数据变动,UI自动变动),快速实现事件绑 ...

  2. python爬虫的一个常见简单js反爬

    python爬虫的一个常见简单js反爬 我们在写爬虫是遇到最多的应该就是js反爬了,今天分享一个比较常见的js反爬,这个我已经在多个网站上见到过了. 我把js反爬分为参数由js加密生成和js生成coo ...

  3. Node.js简单介绍并实现一个简单的Web MVC框架

    编号:1018时间:2016年6月13日16:06:41功能:Node.js简单介绍并实现一个简单的Web MVC框架URL :https://cnodejs.org/topic/4f16442cca ...

  4. sChart.js：一个小型简单的图表库

    介绍 sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图.折线图.饼状图和环形图四种基本的图表.麻雀虽小,五脏俱全.sChart.js 基本可以满足这四种图表的需求.而它 ...

  5. 一个不错的PHP二维数组排序函数简单易用存用

    一个不错的PHP二维数组排序函数简单易用存用 传入数组,传入排序的键,传入排序顺序 public function array_sort($arr,$keys,$type='asc') { $keys ...

  6. djb2：一个产生简单的随机分布的哈希函数

    目录 LCG算法 示例代码 djb2 示例代码 为什么选择参数33和 33 was chosen because: 5381 was chosen because 哈希选择参考 LCG算法 djb2与 ...

  7. 使用JAVA写一个简单的日历

    JAVA写一个简单的日历import java.text.DateFormat;import java.text.ParseException;import java.text.SimpleDateF ...

  8. js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步（open的post方式send函数带参数）（post请求和get请求区别：get：快、简单 post：安全，量大，不缓存）（服务器同步和异步区别：同步：等待服务器响应当中浏览器不能做别的事情）（ajax和jquery一起用的）

    js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...

  9. Js文件函数中调用另一个Js文件函数的方法

    在项目中Js文件需要完成某一功能,但这一功能的大部分代码在另外一个Js文件已经完成,只需要调用这个文件实现功能.那么如何调用:一个Js文件函数中调用另一个Js文件函数的方法? (直接代码说明) 示例d ...

随机推荐

  1. 【Java EE 学习 36】【struts2】【struts2系统验证】【struts2 ognl值栈】【struts2 ongl标签】【struts2 UI标签】【struts2模型驱动和令牌机制】

    一.struts2系统验证 1.基于struts2系统验证的方式实际上就是通过配置xml文件的方式达到验证的目的. 2.实际上系统校验的方法和手工校验的方法在底层的基本实现是相同的.但是使用系统校验的 ...

  2. 圣诞老人去哪?Power BI告诉你

    随着圣诞节的来临,微软的Power BI团队使用Power BI来回答大家一直以来所关心的问题:圣诞老人去哪? 要回答这个问题,来自社交网络的数据是最合适不过的了.于是Power BI团队用以下关键字 ...

  3. 【javascript学习——《javascript高级程序设计》笔记】DOM操作

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...

  4. 浅谈Margin和Padding值设置成百分数的布局

    转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS ...

  5. Activiti工作流学习（三）Activiti工作流与spring集成

    一.前言 前面Activiti工作流的学习,说明了Activiti的基本应用,在我们开发中可以根据实际的业务参考Activiti的API去更好的理解以及巩固.我们实际的开发中我们基本上都使用sprin ...

  6. uploadify前台上传文件,java后台处理的例子

    1.先创建一个简单的web项目upload (如图1-1) 2.插件的准备 (1).去uploadify的官网下载一个uploadify插件,然后解压新建个js文件夹放进去(这个不强求,只要路径对了就 ...

  7. Codeforces Round #107 (Div. 2)

    D题 并查集+组合 #include <iostream> #include <cstdio> #include <cstring> using namespace ...

  8. MongoDB基本使用

    成功启动MongoDB后,再打开一个命令行窗口输入mongo,就可以进行数据库的一些操作. 输入help可以看到基本操作命令: show dbs:显示数据库列表 show collections:显示 ...

  9. ios 单例设计模式

    单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类.单例可用性非常高,用于登录用户管理等可供全局调用. + (AccountMa ...

  10. 初学者对于MVC架构模式学习与理解

    理解MVC的工作原理,明白一个网页是如何显示出来的 之前一直盲目的在慕课上看视频,脑袋里想着要理解mvc,看了mvc相关的视频,看完之后就觉得空白白的,M,V,C各代表什么我知道,但是这个究竟有啥意思 ...