这个日历界面不属于任何插件，纯粹用最基本的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. 2021-02-13：字符串str最少添加多少个字符变成回文串？

    福哥答案2020-02-13: 假设字符串str是"abcde12344321",在str后添加"edcba"即可变成回文串.需要添加5个字符. 解法:包含最后 ...

  2. 2021-10-23：位1的个数。编写一个函数，输入是一个无符号整数（以二进制串的形式），返回其二进制表达式中数字位数为 ‘1‘ 的个数（也被称为汉明重量）。提示：请注意，在某些语言（如 Java）中

    2021-10-23:位1的个数.编写一个函数,输入是一个无符号整数(以二进制串的形式),返回其二进制表达式中数字位数为 '1' 的个数(也被称为汉明重量).提示:请注意,在某些语言(如 Java)中 ...

  3. Redis内存兜底策略——内存淘汰及回收机制

    Redis内存兜底策略--内存淘汰及回收机制 Redis内存淘汰及回收策略都是Redis内存优化兜底的策略,那它们是如何进行兜底的呢?先来说明一下什么是内存淘汰和内存回收策略: Redis内存淘汰:当 ...

  4. linux 管理进程和计划任务

    目录 一.进程原理 二.进程工作过程 三.进程类型 四.管理进程 五.前后台调度 六.定时任务 七.管理定时任务 一.进程原理 进程:指正在运行的程序称之为进程 程序:指的是没有运行的代码 线程:真正 ...

  5. flutter 中使用 WebView加载H5页面异常net:ERR_CLEARTEXT_NOT_PERMITTED

    最近有个flutter项目中根据搜索结果跳转到相应的H5页面发现老是报错,曾现在闲暇拉出来解决哈 先来看一个搜索功能的测试 已进入详情页面就提示错误,尴尬了. 只有去检测代码了撒 Search.dar ...

  6. v8 setup

    记录下笔者本人搭建v8环境的过程 环境:处于一些原因笔者选择在kali2023上搭建v8,kali上可以搭建成功但是调试脚本加载有问题,fuck kali,还是ubuntu好,笔者使用了ubuntu2 ...

  7. MySQL之视图，索引，存储过程，触发器--实操

    一.视图 什么是视图? 视图是一个虚拟表,其内容由查询定义. 同真实的表一样,视图包含系列带有名称的列和行数据. 行和列数据来自定义视图的查询所引用的表,并且在引用视图时动态生成. 简单的来说视图是由 ...

  8. 利用jira及confluence的API进行批量操作（查找/更新/导出/备份/删除等）

    前言: 近期因为某些原因需要批量替换掉 jira 和 confluence中的特定关键字,而且在替换前还希望进行备份(以便后续恢复)和导出(方便查看)atlassian官方的api介绍文档太简陋,很多 ...

  9. uniapp主题切换功能的第二种实现方式（scss变量+require）

    在上一篇 "uniapp主题切换功能的第一种实现方式(scss变量+vuex)" 中介绍了第一种如何切换主题,但我们总结出一些不好的地方,例如扩展性不强,维护起来也困难等等,那么接 ...

  10. 基于php的外卖订餐网站（php+mysql）

    介绍 一个基于php的外卖订餐网站,包括前端和后台. 效果演示 http://101.43.124.118:8001/admin 源码地址 https://github.com/geeeeeeeek/ ...