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

<!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实现 蓝桥杯 历届试题 小数第n位

    历届试题 小数第n位 时间限制:1.0s 内存限制:256.0MB 问题描述 我们知道,整数做除法时,有时得到有限小数,有时得到无限循环小数. 如果我们把有限小数的末尾加上无限多个0,它们就有了统一的 ...

  2. Java实现 蓝桥杯VIP 算法训练 大小写判断

    问题描述 给定一个英文字母判断这个字母是大写还是小写. 输入格式 输入只包含一个英文字母c. 输出格式 如果c是大写字母,输出"upper",否则输出"lower&quo ...

  3. Java实现 神犇的悲惨一生

    [问题描述] 传说中有位神犇,因其一贯低调,所以人们连他活了多少岁都不知道. 好在XXXX文献上有段关于他生平细节的文字:神犇一生中, 幼年占了1/6,又过了1/12的青春期,又谈了1/6的恋爱后结婚 ...

  4. Java实现 洛谷 P1023 税收与补贴问题

    import java.util.Scanner; public class Main { public static void main(String[] args){ Scanner in = n ...

  5. Linux 用户管理命令-userdel和su

    userdel [选项] 用户名,可以删除用户,常用选项 -r :删除用户的同时删除用户的家目录,一般都要用,例如:userdel -r xbb 新建用户和删除用户的本质也就是修改了 /etc/sha ...

  6. Python内存管理机制-《源码解析》

    Python内存管理机制 Python 内存管理分层架构 /* An object allocator for Python. Here is an introduction to the layer ...

  7. Linux RTC设备驱动

    1. 在Linux2.6.29内核中,RTC是以平台设备的方式注册进内核的. ① RTC驱动定义于文件:drivers/rtc/rtc-s3c.c static struct platform_dri ...

  8. 自己动手实现深度学习框架-7 RNN层--GRU, LSTM

    目标         这个阶段会给cute-dl添加循环层,使之能够支持RNN--循环神经网络. 具体目标包括: 添加激活函数sigmoid, tanh. 添加GRU(Gate Recurrent U ...

  9. CSS布局之Flex布局

    Flex布局,可以简便.完整.响应式地实现各种页面布局. 浏览器支持:得到所有浏览器的支持.(注:Flex布局将成为未来布局的首选方案)   一. Flex布局的概念 Flex是Flexible Bo ...

  10. 【分区】使用 GPT 分区表分区并格式化 (FreeBSD 系统)

    1. 查看磁盘列表 使用命令 diskinfo -v /dev/vtbd1 查看磁盘设备列表. 2. 创建 GPT 分区 1). 执行命令 gpart create -s gpt vtbd1.2). ...