这个日历界面不属于任何插件，纯粹用最基本的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. 创建CMDB项目

  2. WARNING: The repository located at mirrors.aliyun.com is not a trusted or secure host and is being

    更换下载源: https://pypi.tuna.tsinghua.edu.cn/simple/

  3. django购物车的实现

    1 购物车的实现问题思路 购物车需求分析: 1 未登陆和已登陆都保存到用户的购物车数据. 2 用户可以对购物车进行增删改查: 3 购物车有选择状态,只有选中的状态才能生成订单: 4 用户登陆时,合并c ...

  4. Dapr在Java中的实践 之 状态管理

    状态管理 状态管理(State Management)使用键值对作为存储机制,可以轻松的使长时运行.高可用的有状态服务和无状态服务共同运行在我们的服务中. 我们的服务可以利用Dapr的状态管理API在 ...

  5. Spring事件监听机制使用和原理解析

    你好,我是刘牌! 前言 好久没有更新Spring了,今天来分享一下Spring的事件监听机制,之前分享过一篇Spring监听机制的使用,今天从原理上进行解析,Spring的监听机制基于观察者模式,就是 ...

  6. Hive执行计划之只有map阶段SQL性能分析和解读

    目录 目录 概述 1.不带函数操作的select-from-where型简单SQL 1.1执行示例 1.2 运行逻辑分析 1.3 伪代码解释 2.带普通函数和运行操作符的普通型SQL执行计划解读 2. ...

  7. Android-NDK开发——基本概念

    在Android开发中,有时候出于安全,性能,代码共用的考虑,需要使用C/C++编写的库.虽然在现代化工具链的支持下,这个工作的难度已经大大降低,但是毕竟万事开头难,初学者往往还是会遇到很多不可预测的 ...

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

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

  9. 混合模式开发之原生App webview与H5交互

    快速实现 混合模式开发之原生App webview与H5交互, 详情请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12550 效果图如下: ...

  10. Redis基础(二)——列表操作、redis管道、Django中使用redis

    Redis列表操作 ''' lpush(name,values) rpush(name, values) 表示从右向左操作 lpushx(name,value) rpushx(name, value) ...