思路：先写一个结构和样式，然后写本月的时间，之后计算上下月份的关系

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        li.disabled {

            background: #eee;

            color: #ccc;

            cursor: not-allowed;

        }

        .container {

            border: 1px solid #ccc;

            margin: 50px;

            width: 350px;

        }

        .container li {

            width: 50px;

            height: 50px;

            text-align: center;

            line-height: 50px;

            cursor: pointer;

        }

        .container li:not(.disabled):hover {

            background: rgb(185, 238, 238);

        }

        .container ul {

            display: flex;

            flex-wrap: wrap;

        }

        li.active {

            background: darkcyan;

            color: #fff;

        }

        button{

            width: 50px;

            background-color: rgb(28, 113, 224);

            color: #fff;

        }

    </style>

</head>

<body>

    <button class="prev">上月</button>

    <button class="next">下月</button>

    <div class="container">

        <ul>

            <li>日</li>

            <li>一</li>

            <li>二</li>

            <li>三</li>

            <li>四</li>

            <li>五</li>

            <li>六</li>

        </ul>

        <ul class='content'>

        </ul>

    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

    <script>

        $(function () {

            let totalDays = 0

            let now = new Date()

            let today = now.getDate()

            let global_month = now.getMonth() + 1

            let global_year = now.getFullYear()

            $('.prev').click(function () {

                now.setMonth(now.getMonth() - 1) //6-31  7-1

                initCalendar()

            })

            $('.next').click(function () {

                now.setMonth(now.getMonth() + 1) //6-31  7-1

                initCalendar()

            })

            function initCalendar() {

                $('.content').empty()

                let month = now.getMonth() + 1

                let year = now.getFullYear()

                switch (month) {

                    case 1:

                    case 3:

                    case 5:

                    case 7:

                    case 8:

                    case 10:

                    case 12:

                        totalDays = 31

                        break;

                    case 4:

                    case 6:

                    case 9:

                    case 11:

                        totalDays = 30

                        break

                    default:

                        if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {

                            totalDays = 29

                        } else {

                            totalDays = 28

                        }

                        break;

                }

                for (let i = 1; i <= totalDays; i++) {

                    let li = $('<li/>').text(i)

                    if (i === today && year === global_year && month === global_month) li.addClass('active')

                    $('.content').append(li)

                }

                now.setDate(1)

                let firstDay = now.getDay()

                for (let i = 0; i < firstDay; i++) {

                    now.setDate(now.getDate() - 1)

                    let li = $('<li/>').text(now.getDate()).addClass('disabled')

                    $('.content').prepend(li)

                }

                now.setDate(now.getDate() + firstDay)

                now.setDate(totalDays)

                let lastDay = 6 - now.getDay()

                for (let i = 0; i < lastDay; i++) {

                    now.setDate(now.getDate() + 1)

                    let li = $('<li/>').text(now.getDate()).addClass('disabled')

                    $('.content').append(li)

                }

                now.setDate(now.getDate() - lastDay)

                now.setDate(1)

            }

            initCalendar()

        })

    </script>

</body>

</html>

js写一个简单的日历的更多相关文章

  1. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  2. 使用JAVA写一个简单的日历

    JAVA写一个简单的日历import java.text.DateFormat;import java.text.ParseException;import java.text.SimpleDateF ...

  3. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  4. [NodeJS]使用Node.js写一个简单的在线聊天室

    声明:教程来自<Node即学即用>.源代码案例均出自此书.博文仅为个人学习笔记. 第一步:创建一个聊天server. 首先,我们先来写一个Server: var net = require ...

  5. 用node.js写一个简单爬虫，并将数据导出为 excel 文件

    引子 最近折腾node,最开始像无头苍蝇一样到处找资料,然而多数没什么卵用,都在瞎比比.在一阵瞎搞后,我来分享一下初步学习node的三个过程: 1 撸一遍NODE入门,对其有个基本的了解: 2 撸一遍 ...

  6. 用JS写一个简单的程序,算出１００中７的倍数的最大值

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 用JS 写一个简单的程序，切换七彩盒子背景

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. JS写一个简单的程序，输入两个整数，打印这两个数的和，差，积，余数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JS写一个简单的程序，判断年份是平年还是闰年

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Java实现 LeetCode 75 颜色分类

    75. 颜色分类 给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 此题中,我们使用整数 0. 1 和 2 分别表示红 ...

  2. java实现 洛谷 P1427 小鱼的数字游戏

    题目描述 小鱼最近被要求参加一个数字游戏,要求它把看到的一串数字(长度不一定,以0结束,最多不超过100个,数字不超过2^32-1),记住了然后反着念出来(表示结束的数字0就不要念出来了).这对小鱼的 ...

  3. java实现迷宫走法

    ** 迷宫走法** 迷宫问题 对于走迷宫,人们提出过很多计算机上的解法.深度优先搜索.广度优先搜索是使用最广的方法.生活中,人们更愿意使用"紧贴墙壁,靠右行走"的简单规则. 下面的 ...

  4. TZOJ 公交车

    描述 公交车在一条笔直的道路(道路宽度忽略,设为X轴)上行驶,按顺序路上有若干个站点(X坐标值),crq的家也在道路旁某个位置h(X坐标值),现在crq想知道哪个站点下车离家最近. 输入 输入数据的第 ...

  5. Python API自动化测试实操

    废话不多说,直接上代码截图: 我们首先来看看整个工程的目录结构,这样以便于了解项目的调用关系:config   #这里是配置包 -- base_url.py 具体配置了被测系统的url and pat ...

  6. 全网最全测试点总结：N95 口罩应该如何测试？

    引言 随着”新冠疫情“慢慢地消散,各大企业都开始恢复正常的运行,因为疫情造成很多工作人员的流失,企业也开始疯狂的招聘新鲜的人才,这对于莘莘求职者无疑是个机会,但是因为求职者众多,很多面试官也开始想方设 ...

  7. org.apache.maven.plugins:maven-archetype-plugin:RELEASE:generate——解决方案汇总

    近期将自己本地的 maven 仓库进行了迁移,idea 的版本也升级到了IntelliJ IDEA 2019.3.3 x64,但是遇到了 Plugins 报红的情况,尝试很多方法,终于解决,现在做一下 ...

  8. 链家网 + gevent

    import gevent from gevent import monkey monkey.patch_all() from gevent.queue import Queue import tim ...

  9. vue + elementUI开发，使用el-tabs，导致浏览器卡死问题。

    第一次自己建项目,用过el-tabs,当时是正常使用的. 贴下版本信息: "element-ui": "^2.13.0", "js-md5" ...

  10. Python 读取和输出到txt

    读txt文件 python常用的读取文件函数有三种read().readline().readlines() read() #一次性读取文本中全部的内容,以字符串的形式返回结果 with open(& ...