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

<!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 630 课程表 III（大小堆）

    630. 课程表 III 这里有 n 门不同的在线课程,他们按从 1 到 n 编号.每一门课程有一定的持续上课时间(课程时间)t 以及关闭时间第 d 天.一门课要持续学习 t 天直到第 d 天时要完成 ...

  2. Java实现 LeetCode 434 字符串中的单词数

    434. 字符串中的单词数 统计字符串中的单词个数,这里的单词指的是连续的不是空格的字符. 请注意,你可以假定字符串里不包括任何不可打印的字符. 示例: 输入: "Hello, my nam ...

  3. Java实现 蓝桥杯VIP 算法训练 ALGO-16进制转换

    算法训练 进制转换 时间限制:1.0s 内存限制:256.0MB 问题描述 我们可以用这样的方式来表示一个十进制数: 将每个阿拉伯数字乘以一个以该数字所处位置的(值减1)为指数,以10为底数的幂之和的 ...

  4. Linux vi使用技巧

    导入命令执行结果:r !命令,例如:导入已经存在的文件内容到当前文件 导入命令执行的结果到当前文件 定义快捷键,map 快捷键 触发命令,例如:map ^P I#<ESC>(使用CRTL+ ...

  5. REDIS主从频繁切换事件排查

    目录 前言 现象 排查 结论 redis主从配置注意点 前言 目前生产配置了2台redis一主一从1.193和12.6,和3个哨兵.1.193,3.10,12.6,搭建的redis高可用环境.突然发生 ...

  6. python XlsxWriter模块创建aexcel表格

    https://blog.csdn.net/qq_41030861/article/details/82148777 安装使用pip install XlsxWriter来安装,Xlsxwriter用 ...

  7. CentOS7 yum 安装配置 MySQL 5.7

    1.配置yum源 # 下载mysql源安装包 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm # 安装 ...

  8. 06.Django-用户认证

    用户认证 Django 内置一个 auth 模块,帮助用户实现注册.登录.注销以及修改密码等功能,帮助开发者省去了很多功夫 用于认证的数据表 auth_user User是auth模块中维护用户信息的 ...

  9. [转] Linux下用文件IO的方式操作GPIO（/sys/class/gpio）

    点击阅读原文 一.概述 通过 sysfs 方式控制 GPIO,先访问 /sys/class/gpio 目录,向 export 文件写入 GPIO 编号,使得该 GPIO 的操作接口从内核空间暴露到用户 ...

  10. flutter-web利用dart js 库发起http request

    初学flutter,初学前端,尝试在dart中直接使用HttpClient时,直接报出Platform not supported,查资料发现他还不支持浏览器. 通过查阅资料发现可以借助axios 与 ...