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

<!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实现 蓝桥杯 算法训练 删除数组零元素

    算法训练 删除数组零元素 时间限制:1.0s 内存限制:512.0MB 提交此题 从键盘读入n个整数放入数组中,编写函数CompactIntegers,删除数组中所有值为0的元素,其后元素向数组首端移 ...

  2. Java实现凸包问题

    1 问题描述 给定一个平面上n个点的集合,它的凸包就是包含所有这些点的最小凸多边形,求取满足此条件的所有点. 另外,形象生动的描述: (1)我们可以把这个问题看作如何用长度最短的栅栏把n头熟睡的老虎围 ...

  3. Java实现最优二叉查找树

    1 问题描述 在了解最优二叉查找树之前,我们必须先了解何为二叉查找树? 引用自百度百科一段讲解: 二叉排序树(Binary Sort Tree)又称二叉查找树(Binary Search Tree), ...

  4. System.PlatformNotSupportedException:“Operation is not supported on this platform.”

    vs2019创建.net core3.1 的控制台应用程序 执行以下代码: using System; using System.Diagnostics; using System.Threading ...

  5. 基于springcloud gateway + nacos实现灰度发布（reactive版）

    什么是灰度发布? 灰度发布(又名金丝雀发布)是指在黑与白之间,能够平滑过渡的一种发布方式.在其上可以进行A/B testing,即让一部分用户继续用产品特性A,一部分用户开始用产品特性B,如果用户对B ...

  6. 你都这么拼了，面试官TM怎么还是无动于衷？

    前言 面试,对于每个人而然并不陌生,可以说是必须经历的一个过程了,小到一场考试,大到企业面试,甚至大型选秀...... 有时自己明明很努力了,但偏偏会在面试环节出了插曲,比如,紧张就是最容易出现的了. ...

  7. windows下Python版本切换使用方法

    由于历史原因,Python有两个大的版本分支,Python2和Python3,又由于一些库只支持某个版本分支,所以需要在电脑上同时安装Python2和Python3,因此如何让两个版本的Python兼 ...

  8. Python中的计时函数

    我们已经知道使用cell magic或者line magic里面的%%time或者%time能够对Python程序中某一模块的运行时间进行计算,下面是一种更为灵活的计时方法,利用了计时函数time.t ...

  9. VScode快捷键集锦（持续更新）

    本文的快捷键是根据VScode for mac来的,Windows和Linux用户可能需要些许改动. 注释:cmd + /  注释当前选中的行,或者注释掉选中的行,再按一次反注释.还可以在按cmd + ...

  10. Oracle调优之看懂Oracle执行计划

    @ 目录 1.文章写作前言简介 2.什么是执行计划? 3.怎么查看执行计划? 4.查看真实执行计划 5.看懂Oracle执行计划 5.1 查看explain 5.2 explain执行顺序 5.3 访 ...