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

<!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 204 计数质数

    204. 计数质数 统计所有小于非负整数 n 的质数的数量. 示例: 输入: 10 输出: 4 解释: 小于 10 的质数一共有 4 个, 它们是 2, 3, 5, 7 . class Solutio ...

  2. java代码（15） ---java8 Function 、Consumer 、Supplier

    Java8 Function.Consumer.Supplier 有关JDK8新特性之前还有三篇博客: 1,java代码(1)---Java8 Lambda 2,java代码(2)---Java8 S ...

  3. surface go重新做系统

    此教程适用于使用U盘恢复介质来恢复Surface Go二合一设备系统SurfaceGo_BMR_45_64_1.011.2.zip 大致两个步骤 一.制作U盘恢复介质 下载适用于自己平板的恢复镜像文件 ...

  4. 第12章 Java内存模型与线程

    参考<深入理解Java虚拟机> 一.Java内存模型 1.Java内存模型 2.内存间交互操作  流程图: 3.volatile关键字 两个特性: 3.1.保证变脸对所有线程的可见性: 由 ...

  5. RocketMQ系列（三）消息的生产与消费

    前面的章节,我们已经把RocketMQ的环境搭建起来了,是一个两主两从的异步集群.接下来,我们就看看怎么去使用RocketMQ,在使用之前,先要在NameServer中创建Topic,我们知道Rock ...

  6. STM32的8*8点阵屏开发（小项目）

    基础认识 实现效果 项目实现STM32点阵屏的操作,自动更改显示内容和串口控制显示内容 STM32上电后: 1)   程序将进行行和列的刷新 2)   自动递增显示0-9变化 3)   进行矩形由内向 ...

  7. java第三阶段作业总结

    Java第三阶段总结 前言 到这里,Java课程学习进入了尾声,在这学习过程中,我学习到很多,也发现了自己的很多不足,这篇博客主要针对的是Java整门课程学习的总结. 课程收获 对整门课程的学习,我有 ...

  8. css固定宽高DIV内部元素垂直居中的方法

    应用案例 案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的.很多朋友的做法是头部加一个padding或者margin,这样,里面内容显得貌似是居中了,但是假如内容变化,这样头部的固定 ...

  9. 存储系列之 DAS、SAN、NAS三种常见架构概述

    随着主机.磁盘.网络等技术的发展,对于承载大量数据存储的服务器来说,服务器内置存储空间,或者说内置磁盘往往不足以满足存储需要.因此,在内置存储之外,服务器需要采用外置存储的方式扩展存储空间,今天在这里 ...

  10. openshift v1.5 不能登录system:admin 问题

    这个好像是无法解决的,我按照github和google所有步骤试过了,还是不能登录system:admin .需要密码.弄了两个小时,后来放弃了,直接使用新版本3.6的,按照官网方法部署,可以使用直接 ...