这个日历界面不属于任何插件，纯粹用最基本的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. 超实用的Go语言基础教程，让你快速上手刷题！！

    背景 工欲善其事,必先利其器.掌握Go的基础语法还不够,还需要勤加练习,修习"外功",才能达到出奇制胜的效果. 在大致了解Go语言的基本语法后,我就迫不得已地想使用这门语言.可是我 ...

  2. 2020-12-09：TCP中，慢启动是什么？

    福哥答案2020-12-09: 简单回答:乘法增大. 中级回答:cwnd拥塞窗口.rwnd接收窗口.MSS最大报文段长度.ssthresh慢开始门限.使用慢开始算法后,每经过一个传输轮次(即往返时延R ...

  3. 2021-10-27：课程表。你这个学期必须选修 numCourses 门课程，记为 0 到 numCourses - 1 。在选修某些课程之前需要一些先修课程。 先修课程按数组 prerequisi

    2021-10-27:课程表.你这个学期必须选修 numCourses 门课程,记为 0 到 numCourses - 1 .在选修某些课程之前需要一些先修课程. 先修课程按数组 prerequisi ...

  4. 2021-09-22：请你判断一个 9x9 的数独是否有效。只需要 根据以下规则 ，验证已经填入的数字是否有效即可。数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9

    2021-09-22:请你判断一个 9x9 的数独是否有效.只需要 根据以下规则 ,验证已经填入的数字是否有效即可.数字 1-9 在每一行只能出现一次.数字 1-9 在每一列只能出现一次.数字 1-9 ...

  5. Git开发、发布、缺陷分离模型概述（支持master/develop/feature/release/hotfix类型分支）

    Git是什么? Git是一种分布式版本控制系统,它可以记录文件的修改历史和版本变化,并可以支持多人协同开发.Git最初是由Linux开发者Linus Torvalds创建的,它具有高效.灵活.稳定等优 ...

  6. Django4全栈进阶之路5 Model模型

    在 Django 中,模型(Model)是用于定义数据结构的组件,其作用如下: 定义数据结构:模型用于定义数据库中的表格和表格中的字段(列),其中每个模型类对应一个表格,模型中的每个字段对应表格中的一 ...

  7. vue全家桶进阶之路21：Vue Loader 打包单位件组件

    Vue Loader 是一个 webpack 插件,它允许在单个文件中定义 Vue 组件,并将其包装为 CommonJS 模块,以便在应用程序中使用.使用 Vue Loader 打包的组件被称为单文件 ...

  8. CSS文本过长时设置省略号

    写页面时很多时候会遇到一个容器中文本内容超出,使用overflow : hidden;,但是跟用户体验不太友好,设置overflow : scroll; 会出现滚动看着也不爽,所以我就想使用css 设 ...

  9. 设置nginx允许服务端跨域

    目前项目大多使用前后端分离的模式进行开发,跨域请求当然就是必不可少了,很多时候我们会使用在客户端的ajax 请求中设置跨域请求,也有的在服务端设置跨域.但是有时候会遇到不使用ajax也没有使用后端服务 ...

  10. 在国内用Java代理调用OpenAI的ChatGPT的API接口

    第一步:一个科学友好的上网工具,开启全局代理: 第二步:一个注册好的ChatGPT账号,且在个人设置里面生成apiKey:https://platform.openai.com/account/api ...