这个日历界面不属于任何插件，纯粹用最基本的JS函数获取到每个位置对应的日期，然后再通过遍历拼接table表单的方式赋值到HTML里面进行展示，日历效果的显示，其中使用到的文件只需要一个Jquery的JS文件即可实现如下效果：

Demo只是一个简单的日历模板，没有太多函数和限制，开发人员可以基于自己的想法在里面任意更改

下列是JS代码：

<script type="text/javascript" src="js/jquery.js" ></script>

        <script type="text/javascript">

            $(function () {

                //获取当前日期及其年月

                var todate=new Date();

                var year=todate.getFullYear();//当前年份

                var month=todate.getMonth()+1;//当前月份

                $("#tdtitle").html(year+"年"+month+"月");

                //传入ID定义初始化方法

                InitialMethod($("#tbTypesetting"), year, month, "trclass", 'tdclass');

            });

            //初始化方法

            function InitialMethod(tabID, year, month, style, tdclass)

            {

                //获取月份的第一天

                var MonthOne = new Date(year + '/' + month + '/01');

                //获取第一天是星期几

                var weekOne = MonthOne.getDay();

                //几天前

                var AgoDay = (weekOne) * (-1);

                //当月最大日期的索引

                var MaxDay = getCountDays(MonthOne)-1;

                //当前日期

                var today = getToday();

                var strhtml;

                var countNum = 0;

                //6行 7列

                for (var i = 0; i < 6; i++)

                {

                    strhtml += "<tr class='" + style + "'>";

                    for (var j = 0; j < 7; j++)

                    {

                        var sum = AgoDay + countNum;

                        if (sum < 0 || sum > MaxDay)

                        {

                            strhtml += "<td class='" + tdclass + "' style='color:#cccccc;'>" + ReturnDay(sum,MonthOne) + "</td>";

                        }

                        else if (ReturnDay(sum,MonthOne) == today) {

                            strhtml += "<td class='" + tdclass + "' style='color:red;'>" + ReturnDay(sum,MonthOne) + "</td>";

                        }

                        else {

                            strhtml += "<td class='" + tdclass + "'>" + ReturnDay(sum,MonthOne) + "</td>";

                        }

                        countNum++;

                    }

                    strhtml+="</tr>";

                }

                tabID.html(strhtml);

            }

            //几天前/后的日期

            function ReturnDay(day,OneDate) {

                var time = new Date(OneDate);

                time.setDate(time.getDate() + day);//获取Day天后的日期

                var y = time.getFullYear();

                var m = time.getMonth() + 1;//获取当前月份的日期

                var d = time.getDate();

                return d;

            }

            //当月有多少天

            function getCountDays(time) {

                var curDate = new Date(time);

                /* 获取当前月份 */

                var curMonth = curDate.getMonth();

                /*  生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */

                curDate.setMonth(curMonth + 1);

                /* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */

                curDate.setDate(0);

                /* 返回当月的天数 */

                return curDate.getDate();

            }

            //当前日期

            function getToday()

            {

                var time = new Date();

                var today = time.getDate();

                return today;

            }

        </script>

HTML代码：

<body>

        <div id="SlopeCheckContainer" style="text-align:center; margin:auto;">

            <table id="concent" class="tableclass">

                <tr class="trclass"><td class="tdclass" colspan="7" id="tdtitle">2019年8月</td></tr>

                <tr style="height:5%">

                    <td class="tdclass">星期天</td>

                    <td class="tdclass">星期一</td>

                    <td class="tdclass">星期二</td>

                    <td class="tdclass">星期三</td>

                    <td class="tdclass">星期四</td>

                    <td class="tdclass">星期五</td>

                    <td class="tdclass">星期六</td>

                </tr>

                <tbody id="tbTypesetting"></tbody>

            </table>

        </div>

    </body>

Demo的完整代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            .tableclass

            {

                width:100%;

                clear:both;

                font-size: 12px;

                border-right: 1px solid #cccccc;

                border-bottom: 1px solid #cccccc;

                border-collapse: collapse;

            }

            .trclass

            {

                height:50px;

            }

            .tdclass

            {

                border-left: 1px solid #cccccc;

                border-top: 1px solid #cccccc;

                background-color:#ffffff;

            }

        </style>

        <script type="text/javascript" src="js/jquery.js" ></script>

        <script type="text/javascript">

            $(function () {

                //获取当前日期及其年月

                var todate=new Date();

                var year=todate.getFullYear();//当前年份

                var month=todate.getMonth()+1;//当前月份

                $("#tdtitle").html(year+"年"+month+"月");

                //传入ID定义初始化方法

                InitialMethod($("#tbTypesetting"), year, month, "trclass", 'tdclass');

            });

            //初始化方法

            function InitialMethod(tabID, year, month, style, tdclass)

            {

                //获取月份的第一天

                var MonthOne = new Date(year + '/' + month + '/01');

                //获取第一天是星期几

                var weekOne = MonthOne.getDay();

                //几天前

                var AgoDay = (weekOne) * (-1);

                //当月最大日期的索引

                var MaxDay = getCountDays(MonthOne)-1;

                //当前日期

                var today = getToday();

                var strhtml;

                var countNum = 0;

                //6行 7列

                for (var i = 0; i < 6; i++)

                {

                    strhtml += "<tr class='" + style + "'>";

                    for (var j = 0; j < 7; j++)

                    {

                        var sum = AgoDay + countNum;

                        if (sum < 0 || sum > MaxDay)

                        {

                            strhtml += "<td class='" + tdclass + "' style='color:#cccccc;'>" + ReturnDay(sum,MonthOne) + "</td>";

                        }

                        else if (ReturnDay(sum,MonthOne) == today) {

                            strhtml += "<td class='" + tdclass + "' style='color:red;'>" + ReturnDay(sum,MonthOne) + "</td>";

                        }

                        else {

                            strhtml += "<td class='" + tdclass + "'>" + ReturnDay(sum,MonthOne) + "</td>";

                        }

                        countNum++;

                    }

                    strhtml+="</tr>";

                }

                tabID.html(strhtml);

            }

            //几天前/后的日期

            function ReturnDay(day,OneDate) {

                var time = new Date(OneDate);

                time.setDate(time.getDate() + day);//获取Day天后的日期

                var y = time.getFullYear();

                var m = time.getMonth() + 1;//获取当前月份的日期

                var d = time.getDate();

                return d;

            }

            //当月有多少天

            function getCountDays(time) {

                var curDate = new Date(time);

                /* 获取当前月份 */

                var curMonth = curDate.getMonth();

                /*  生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */

                curDate.setMonth(curMonth + 1);

                /* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */

                curDate.setDate(0);

                /* 返回当月的天数 */

                return curDate.getDate();

            }

            //当前日期

            function getToday()

            {

                var time = new Date();

                var today = time.getDate();

                return today;

            }

        </script>

    </head>

    <body>

        <div id="SlopeCheckContainer" style="text-align:center; margin:auto;">

            <table id="concent" class="tableclass">

                <tr class="trclass"><td class="tdclass" colspan="7" id="tdtitle">2019年8月</td></tr>

                <tr style="height:5%">

                    <td class="tdclass">星期天</td>

                    <td class="tdclass">星期一</td>

                    <td class="tdclass">星期二</td>

                    <td class="tdclass">星期三</td>

                    <td class="tdclass">星期四</td>

                    <td class="tdclass">星期五</td>

                    <td class="tdclass">星期六</td>

                </tr>

                <tbody id="tbTypesetting"></tbody>

            </table>

        </div>

    </body>

</html>

JS自制极简日历Demo的更多相关文章

  1. 极简 Node.js 入门 - 3.2 文件读取

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  2. 极简 Node.js 入门 - 5.1 创建 HTTP 服务器

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  3. 极简 Node.js 入门 - 5.3 静态资源服务器

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  4. 自制 os 极简教程1：写一个操作系统有多难

    为什么叫极简教程呢?听我慢慢说 不知道正在阅读本文的你,是否是因为想自己动手写一个操作系统.我觉得可能每个程序员都有个操作系统梦,或许是想亲自动手写出来一个,或许是想彻底吃透操作系统的知识.不论是为了 ...

  5. Snabbt.js – 极简的 JavaScript 动画库

    Snabbt.js 是一个简约的 JavaScript 动画库.它会平移,旋转,缩放,倾斜和调整你的元素.通过矩阵乘法运算,变换等可以任何你想要的方式进行组合.最终的结果通过 CSS3 变换矩阵设置. ...

  6. 基于 Node.js 平台，快速、开放、极简的 web 开发框架。

    资料地址:http://www.expressjs.com.cn/ Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. $ npm install express -- ...

  7. weixinShare.js / 极简微信分享插件

    weixinShare.js / 极简微信分享插件 / 版本:0.1 这是一个很简单.很实用的微信分享插件,无需jQuery,只需要在网页里加入一行JS代码,即可自动识别微信浏览器并启动微信分享的提示 ...

  8. 原生JS轮播-各种效果的极简实现

    寒假持续摸鱼中~此为老早以前博客的重写,当时还是分开写的,这里汇总重写,正好复习一遍~ 春招我来了! 所有有意思的,一股脑先扔进收藏,然后再也不看哈哈,真是糟糕. 今日事,今日毕,说起来容易. 当时竟 ...

  9. js消除小游戏(极简版)

    js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div&qu ...

  10. HTML5 极简的JS函数

    页面初始化 mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面.关闭 ...

随机推荐

  1. exclude查询时出掉或排除某个条件的信息

    exclude查询时出掉或排除某个条件的信息 print(Student.objects.all().exclude(nickname='A')

  2. Java网络编程----通过实现简易聊天工具来聊聊BIO

    IO模型即输入输出模型,我们今天主要来聊的是java网络编程中的IO模型---BIO模型.BIO即阻塞式IO,Blocking IOblocking [ˈblɒkɪŋ] v. 堵塞; 阻塞; 堵住(某 ...

  3. < Python全景系列-3 > Python控制流程盘点及高级用法、神秘技巧大揭秘！

    欢迎来到我们的系列博客<Python全景系列>!在这个系列中,我们将带领你从Python的基础知识开始,一步步深入到高级话题,帮助你掌握这门强大而灵活的编程语法.无论你是编程新手,还是有一 ...

  4. ODOO13之 八：Odoo 13开发之业务逻辑 – 业务流程的支持

    在前面的文章中,我们学习了模型层.如何创建应用数据结构以及如何使用 ORM API 来存储查看数据.本文中我们将利用前面所学的模型和记录集知识实现应用中常用的业务逻辑模式. 本文的主要内容有: 以单据 ...

  5. 文心一言 VS 讯飞星火 VS chatgpt （28）-- 算法导论5.1 3题

    三.假设你希望以1/2的概率输出0与 1.你可以自由使用一个输出0或1的过程 BIASED-RANDOM.它以某概率 p 输出1,概率 1-p 输出0,其中 0<p<1 ,但是 p 的值未 ...

  6. OCR -- 文本识别 -- 理论篇

    文本识别的应用场景很多,有文档识别.路标识别.车牌识别.工业编号识别等等,根据实际场景可以把文本识别任务分为两个大类:规则文本识别和不规则文本识别. 规则文本识别:主要指印刷字体.扫描文本等,认为文本 ...

  7. 在 Linux 和 Windows 下源码安装 Perl

    Perl 是一种功能丰富的计算机程序语言,运行在超过 100 种计算机平台上,适用广泛,从大型机到便携设备,从快速原型创建到大规模可扩展开发.在生物信息分析领域,Perl 主要是做数据预处理.文本处理 ...

  8. python学习框架

    Python简介与安装 Python的历史与特点 Python的安装与配置 Python基础语法 变量与数据类型 运算符与表达式 控制结构(条件判断与循环) 函数与模块 错误处理与异常 Python数 ...

  9. 绘图;OSPF 虚连接

    绘图;OSPF 虚连接 原图如下 绘图 实验拓扑 实验需求 按照图示分区域配置OSPF 配置虚连接认证 实验步骤 配置相应接口IP地址及loopback 环回口地址 按照图示分区域配置OSPF AR1 ...

  10. Helm实战案例二：在Kubernetes(k8s)上使用helm安装部署日志管理系统EFK

    目录 一.系统环境 二.前言 三.日志管理系统EFK简介 四.helm安装EFK 4.1 helm在线安装EFK 4.2 helm离线安装EFK(推荐) 五.访问kibana 5.1 数据分片 六.卸 ...