这个日历界面不属于任何插件，纯粹用最基本的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. 2022-08-26：用一个大小为 m x n 的二维网格 grid 表示一个箱子 你有 n 颗球。箱子的顶部和底部都是开着的。 箱子中的每个单元格都有一个对角线挡板，跨过单元格的两个角， 可以将球导

    2022-08-26:用一个大小为 m x n 的二维网格 grid 表示一个箱子 你有 n 颗球.箱子的顶部和底部都是开着的. 箱子中的每个单元格都有一个对角线挡板,跨过单元格的两个角, 可以将球导 ...

  2. vue全家桶进阶之路11：计算属性

    Vue2 中的计算属性是指在组件中声明的计算属性,它们的值是根据其他数据计算得出的,并且会根据依赖数据的变化而自动更新.计算属性可以在模板中使用,与普通属性一样使用,但是它们具有以下优点: 缓存:计算 ...

  3. Docker安装Airflow

    环境 系统:Ubuntu 22.04.2 LTS docker Version:20.10.21 docker-compose version 1.29.2, python3 --version Py ...

  4. 【论文笔记】Deeplab系列

    [深度学习]总目录 DeepLab系列是谷歌团队提出的一系列语义分割算法.DeepLab v1于2014年推出,随后2017到2018年又相继推出了DeepLab v2,DeepLab v3以及Dee ...

  5. vue3+vite2+element-plus+ts搭建一个项目

    花了几天用 vue3+ vite2+ element-plus+ ts 搭了个 极简版骨架型数据管理系统,使用静态数据模拟动态路由,路由拦截,登录页面鉴权等,使用了iconify字体图标,整合了ces ...

  6. Python基础 - 注释

    单行注释 Python中使用#表示单行注释.一般在#后面添加一个空格,再添加注释内容 1 # 这是单行注释 多行注释   Python中使用三个单引号或三个双引号表示多行注释. 1 ''' 2 这是使 ...

  7. 一天吃透Spring面试八股文

    内容摘自我的学习网站:topjavaer.cn Spring是一个轻量级的开源开发框架,主要用于管理 Java 应用程序中的组件和对象,并提供各种服务,如事务管理.安全控制.面向切面编程和远程访问等. ...

  8. 【实战分享】使用 Go 重构流式日志网关

    项目背景 分享之前,先来简单介绍下该项目在流式日志处理链路中所处的位置. 流式日志网关的主要功能是提供 HTTP 接口,接收 CDN 边缘节点上报的各类日志(访问日志/报错日志/计费日志等),将日志作 ...

  9. vue2父传子，子传父

    首先看父传子 自定义一个子组件 <template> <div> 子组件: <span>{{inputName}}</span> </div> ...

  10. 3 分钟为英语学习神器 Anki 部署一个专属同步服务器

    原文链接:https://icloudnative.io/posts/anki-sync-server/ Anki 介绍 Anki 是一个辅助记忆软件,其本质是一个卡片排序工具--即依据使用者对卡片上 ...